Blogger Information
Blog 67
fans 0
comment 2
visits 72044
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery的checkbox全选、取消全选、反选、选中所有奇数、获得选中的所有值
搁浅
Original
798 people have browsed it
  1. <input type="checkbox" name="xpz" value="1"/>苹果
  2. <input type="checkbox" name="xpz" value="2"/>橘子
  3. <input type="checkbox" name="xpz" value="3"/>梨子
  4. <input type="checkbox" name="xpz" value="4"/>香蕉
  5. <br/><br/>
  6. <input type="button" id="btn1" value="全选">
  7. <input type="button" id="btn2" value="取消全选">
  8. <input type="button" id="btn3" value="选中所有奇数">
  9. <input type="button" id="btn4" value="反选">
  10. <input type="button" id="btn5" value="获得选中的所有值">
  11. $("#btn1").on("click",function(){
  12. $("[name='xpz']").prop("checked",'checked');//全选
  13. });
  14. $("#btn2").on("click",function(){
  15. $("[name='xpz']").removeAttr("checked");//取消全选
  16. })
  17. $("#btn3").click(function(){
  18. $("[name='xpz']:even").prop("checked",'true');//选中所有奇数
  19. })
  20. $("#btn4").click(function(){//反选
  21. $("[name='xpz']").each(function(){
  22. this.checked=!this.checked;
  23. })
  24. })
  25. $("#btn5").click(function(){ //获得选中的所有值
  26. var chk_value =[];//定义一个数组
  27. $('input[name="xpz"]:checked').each(function(){//遍历每一个名字为nodes的复选框,其中选中的执行函数
  28. chk_value.push($(this).val());//将选中的值添加到数组chk_value中
  29. });
  30. var selectId = chk_value.join(",");
  31. alert(selectId);
  32. })
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post