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
No.
◆ 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 colon2. 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
$("#cb1").prop("checked",function(){
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
http://blog.csdn.net/chenchunlin526/article/details/77426796
4, The summary of jQuery's skill of operating checkbox
1. Get the value of a single checkbox check (three ways of writing)
$("#chx1").find("input:checkbox:checked").val()
//perhaps
$("#chx1").find("input:[type='checkbox']:checked").val();
$("#chx1").find("input[type='checkbox']:checked").val();
//perhaps
$("#chx1").find("input:[name='ck']:checked").val();
$("#chx1").find("input[name='ck']:checked").val();
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
chk_value.push($(this).val());
});
alert(chk_value.length==0 ?'You haven't chosen anything yet!':chk_value);
}
3. Set the first checkbox as the selected value
$("#chk1").find('input:checkbox:first').prop("checked",true);
//perhaps
$("#chk1").find('input:checkbox').eq(0).prop("checked",true);
4. Set the last checkbox as the selected value
$("#chk1").find('input:checkbox:last').prop("checked",true);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
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);
$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);
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:
$("#chk1").find("input:checkbox").eq(2).remove();
8. Check all or uncheck all
$("#chk1").find('input:checkbox').each(function() {
$(this).prop('checked', true);
});
//perhaps
$("#chk1").find('input:checkbox').each(function () {
$(this).prop('checked',false);
});
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:
$("#btn4").click(function(){
$("input[type='checkbox']").each(function(){ //Reverse election
if($(this).prop("checked")){
$(this).prop("checked",false);
} else{
$(this).prop("checked",true);
}
});
});
Method two:
$("#btn4").on('click',function(){
//Deselect all check boxes (unchecked, unchecked, unchecked)
$("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
return !oldValue;
});
}
Other articles in this series:
[3]The difference between jQuery's removeProp() and removeAttr() - chunlynn's hut - CSDN blog
Reproduced from: https://blog.csdn.net/chenchunlin526/article/details/77448168
