查看: 3436|回复: 0

[JavaScript/JQuery] 用原生JS实现简单的多选框功能

发表于 2018-1-7 11:20:09

废话不多说了,直接给大家贴代码了,具体代码如下所示:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <input id="cheakAll" type="checkbox">全选
  9. <div>
  10. <input type="checkbox">
  11. <input type="checkbox">
  12. <input type="checkbox">
  13. <input type="checkbox">
  14. <input type="checkbox">
  15. </div>
  16. </body>
  17. </html>
  18. <script>
  19. //找到全选按钮
  20. var oChkAllBtn=document.getElementById('cheakAll');
  21. var oDiv=document.getElementsByTagName('div')[0];
  22. var aInput=oDiv.getElementsByTagName('input');
  23. var n=0; //计数器
  24. //alert(aInput.length);
  25. //点击全选按钮,让其他的全部选中
  26. oChkAllBtn.onclick=function(){
  27. //判断我是什么状态
  28. /*if(this.checked==true){
  29. for(var i=0; i<aInput.length; i++){
  30. aInput[i].checked=true;
  31. }
  32. }else{
  33. for(var i=0; i<aInput.length; i++){
  34. aInput[i].checked=false;
  35. }
  36. }*/
  37. for(var i=0; i<aInput.length; i++){
  38. if(this.checked==true){//判断全选按钮自己的状态
  39. aInput[i].checked=true;
  40. n=aInput.length; //控制计数器
  41. }else{
  42. aInput[i].checked=false;
  43. n=0; //控制计数器
  44. }
  45. };
  46. };
  47. //--------------------------------------------
  48. //每一个按钮绑定事件
  49. for(var j=0; j<aInput.length; j++){
  50. aInput[j].onclick=function(){
  51. //如果我自己是cheaked状态 n++ 否则 n--
  52. if(this.checked==true){
  53. n++;
  54. }else{
  55. n--;
  56. };
  57. //console.log(n);
  58. //如果n==aInput.length
  59. if(n==aInput.length){
  60. oChkAllBtn.checked=true;
  61. }else{
  62. oChkAllBtn.checked=false;
  63. }
  64. };
  65. };
  66. </script>
复制代码

以上所述是小编给大家介绍的用原生JS实现简单的多选框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!



回复

使用道具 举报