Home > Developer > Web Develop
When the check box CheckBox's property checked the property value, it is found that when the value is attr, it is really "checked", false "undefined", and when the value is prop, it really is "true" and false "false". After the online reference to some information, and according to the official recommendations of the two usages: a property with True and false two properties, such as checked, selected or disabled use prop (), the other uses attr ().
Method One:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Select, uncheck and reverse 1</title>
<script src= "Jquery.min.js" ></script>
<script>
$ (function () {
$ ('. Check. btn1 '). Click (function () {//Select all
$ ('. Music:checkbox '). Prop (' checked ', true);
});
$ ('. Check. btn2 '). Click (function () {//Do not select all
$ ('. Music:checkbox '). Prop (' checked ', false);
});
$ ('. Check. Btn3 '). Click (function () {//Counter-Select
$ ('. Music:checkbox '). each (function () {
$ (this). Prop (' Checked ',!$ (this). Prop (' checked '));
});
});
});
</script>
<body>
<div class= "Music" >
<input type= "checkbox" Name= "Music1" value= "small White Rabbit" > Small white Rabbit <br>
<input type= "checkbox" Name= "Music2" value= "Little Swallow" > Little swallow <br>
<input type= "checkbox" Name= "MUSIC3" value= "Pug" > Pug <br>
<input type= "checkbox" Name= "Music4" value= "Little Frog" > Small frog <br>
<input type= "checkbox" Name= "MUSIC5" value= "Number of ducks" > Number of Ducks <br><br>
</div>
<div class= "Check" >
<button class= "BTN1" > Full selection </button>
<button class= "BTN2" > All </button>
<button class= "Btn3" > Anti-selection </button>
</div>
</body>
Method Two:
<! DOCTYPE html>
<meta charset= "UTF-8";
<title> All dynamically generated by jquery </title>
<script src= "Jquery.min.js" ></SCRIPT>
<script>
function Checkall () {//Select all
$ (": CheckBox"). Prop ("checked", true);
}
Function Checkno () {//Select all
$ (": CheckBox"). Prop ("checked", false);
}
Function Checkrev () {//Counter-select
$ (": CheckBox"). each (function () {
$ (this). Prop ("Checked",!$ (This). Prop (" Checked "));
});
}
$ (function () {
var sec=$ ("<div></div>"). AppendTo ($ ("body"));//Create a div appended to the body
var input= "";//Create an empty variable
for (Var i=0;i<5;i++) {
var index=i+1;
input+= "<input type= ' checkbox ' name= ' title '" +index+ "value= ' title '" +index+ ">" + "title" +index+ "<br>";
}//from 0 to 4 each created input is collected into an empty variable
Sec.append (input);//Append all the collected input to the DIV
Sec.append ($ ("<button onclick= ' Checkall () > select All </button>"));//Create a Select All button and append to Div
Sec.append ($ ("<button onclick= ' Checkno () > select All </button>"))//Create all-in button and append to Div
Sec.append ($ ("<button onclick= ' Checkrev () > Reverse </button>"));//Create a Counter-selection button and append it to the DIV
});
</script>
<body>
</body>
Two methods of full selection, non-selection and inverse selection for jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
