jQuery operation check box, set to select, uncheck, get the selected value, judge whether to select, etc

jQuery operation check box skill Summary - set selected, unchecked, get selected value, judge whether selected, etc

1, checked property definition

First understand the checked property of the input tag:

1. HTML < input > checked attribute

◆ definition and usage

The checked property is a Boolean property.

The checked attribute specifies the < input > element that should be pre selected when the page is loaded.

The checked attribute applies to < input type = "checkbox" > and < input type = "radio" >.

The checked property can also be set through JavaScript code after the page is loaded.

◆ differences between HTML 4.01 and HTML5


◆ differences between HTML and XHTML

In XHTML, attribute minimization is prohibited. The checked attribute must be defined as < input checked = "checked" / >.

The scope of this article is jQuery 1.6 + and above. Now jQuery has reached 3.2.1 (January 4, 2018). Version 1.11 and above is recommended for development.

2, Usage of checked property

Note: to operate the checked, disabled, and selected attributes, it is mandatory to use only the prop() method!! , do not use the attr() method.

1. There are three ways for jQuery to determine whether checked is selected:

.attr('checked') // Return: "checked" or "undefined";
.prop('checked') // Return true/false
.is(':checked')  // Return true/false / / don't forget the colon

2. Several ways to write jQuery assigned checked:

All jQuery versions can be assigned in this way. attr() is not recommended:

$("#cb1").attr("checked","checked "); / / general practice, not recommended now
$("#cb1").attr("checked",true); / / not standard, not recommended
$("#cb1").attr("checked","true "); / / not standard, not recommended
jQuery Of prop()Four assignments of (recommended as follows):
$("#cb1").prop("checked",true); / / standard writing, recommended!
$("#cb1").prop({checked:true}); / / map key value pair
    return true;//Function returns true or false
//$("ාcb1").prop("checked","checked"); / / not standard

3, checked="checked" in the tag already exists, but the solution of checking is not displayed

When doing a web project, I have done a function, that is, when I check the column, I will check all roles. The following code was used at the beginning:

function check(id,check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").attr("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").attr("checked", false);        

The first time check and cancel are effective, but after the second time, they don't respond. After checking the properties, it is found that the checked property exists all the time, but the check is not displayed. Consider removing the checked property.

function check(id,check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").attr("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").removeAttr("checked");        

This time I saw that the checked attribute was checked, and the cancellation was gone, but the problem still hasn't been solved, or I didn't respond after the second time.

But I have used version 1.11. The correct way is to use the prop() method to set the checked property value of the checkbox.  

function check(id,check) {        
    if (check) {   
        $("." + id).find("input[type='checkbox']").prop("checked", true);    
    } else {  
        $("." + id).find("input[type='checkbox']").prop("checked", false); 

The essence of this problem is the difference between attr() and prop() in jQuery.

Please refer to:

The difference between attr() and prop() in jQuery in setting and getting properties -- chunlynn's cabin CSDN blog


4, The summary of jQuery's skill of operating checkbox

1. Get the value of a single checkbox check (three ways of writing)


2. Get multiple checkbox checks

$("#chk1").find('input:checkbox').each(function() {/ / traverses all checkboxes
    if ($(this).prop('checked') == true) {
        console.log($(this).val()); //Print the value of the currently selected check box
function getCheckBoxVal(){ //jquery gets the value of all selected checkboxes
    var chk_value =[]; 
    $("#CHK1 "). Find ('input [name =" test "): checked '). Each (function() {/ / traversal, put all the selected values in the array
    alert(chk_value.length==0 ?'You haven't chosen anything yet!':chk_value); 

3. Set the first checkbox as the selected value


4. Set the last checkbox as the selected value


5. Set any checkbox as the selected value according to the index value

$("ාchk1"). Find ('input: checkbox '). EQ (index value). prop('checked', true); / / index value = 0,1,2
/ / or
$("ාchk1").find('input:checkbox').slice(1,2).prop('checked', true); / / select the 0 and 1 checkboxes at the same time

//Checkboxes from index 0 (inclusive) to index 2 (exclusive)

6. Set the checkbox as the selected value according to the value value


7. Delete the checkbox: ① delete the checkbox with value=1 ② delete the first few checkboxes

$("#chk1").find("input:checkbox[value='1']").remove(); / / remove the matching element from the DOM and the tag from the page
$("#chk1").find("input:checkbox").eq(index).remove(); / / index value index=0,1,2
//If you delete the third checkbox:

8. Check all or uncheck all

$("#chk1").find('input:checkbox').each(function() {
    $(this).prop('checked', true);
$("#chk1").find('input:checkbox').each(function () {

9. Check all odd or even items

$("ාchk1"). Find ("input [type ='checkbox ']: even"). Prop ("checked, true); / / select all even numbers
$("ාchk1"). Find ("input [type ='checkbox ']: odd"). Prop ("checked, true); / / select all odd numbers

10, counter election

Method 1:

    $("input[type='checkbox']").each(function(){ //Reverse election
          } else{ 

Method two:

//Deselect all check boxes (unchecked, unchecked, unchecked)
    $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
        return !oldValue;


Other articles in this series:

[1]The difference between attr() and prop() in jQuery in setting and getting properties -- chunlynn's cabin CSDN blog

[2]<a>The difference between the href and onclick in the tag, and the details of onclick(this) passing this parameter - chunlynn's Cabin - CSDN blog

[3]The difference between jQuery's removeProp() and removeAttr() - chunlynn's hut - CSDN blog

Reproduced from: https://blog.csdn.net/chenchunlin526/article/details/77448168

Published 14 original articles, won praise 9, visited 665
Private letter follow

Keywords: JQuery Attribute Javascript html5

Added by Serberus on Sun, 19 Jan 2020 06:11:24 +0200