jquery中的复选框操作

最新推荐文章于 2022-08-29 21:58:42 发布

ebonyzhang

最新推荐文章于 2022-08-29 21:58:42 发布

阅读量1.5k

点赞数 1

文章标签： jquery function input button class border

$(document).ready(function(){
var $likebox=$("[name=like]:checkbox");//把复选框组赋给一个变量；
var $allcheck=$(":checkbox[name=allcheck]")//把全选复选框赋给一个变量；
  function checks(){
   var flag=true;
   $likebox.each(function(){
    if(!this.checked){
     flag=false;
     }
    $allcheck.attr("checked",flag);
   });
  }  //首先定义一个自定义函数，此函数的功能是：检查复选框数组中的选中状态；并更具他的每一个复选框的选中状态来，定义全选复选框是否选中；

  $allcheck.click(function(){
   $likebox.attr("checked",this.checked);
  });  //为全选框绑定一个单击事件；并通过点击它来选中或取消复选框组

  $likebox.click(function(){checks();});
  //为复选框组中的每个元素绑定一个点击事件，并且调用自定义函数来判断，并通过每个元素的状态来定义全选按钮的状态；
  $(".allcheck").bind("click",function(){
   $likebox.attr("checked",true);
   checks();
  });  //为全选按钮绑定一个点击事件，并调用自定义函数来判断；
  $(".nocheck").click(function(){
   $likebox.attr("checked",false);
   checks();
  });  //为取消按钮绑定一个点击事件，并调用自定义函数判断；
  $(".recheck").click(function(){
   $likebox.each(function(){
    this.checked=!this.checked;
   });
   checks();
  }); //为反选钮绑定一个点击事件，并调用自定义函数判断；
  $(".enter").click(function(){
   var str="您选中的项目是：\n";
   $("[name=like]:checkbox:checked").each(function(){
    str+=$(this).val()+"\n";
   });
   alert(str);
  }); //为提交钮绑定一个点击事件，并通过得到的以选中按钮来输出被选中的项的值；
});
</script>
</head>
<body>
<form method=post action="">
<table border="0">
  <tr>
   <td>选择您喜欢的选项：<input type="checkbox" name="allcheck">全选/取消</td>
  </tr>
  <tr>
   <td>
    <label>羽毛球：</label><input type="checkbox" name="like" value="羽毛球">   
    篮球：<input type="checkbox" name="like" value="篮球">   
    棒球：<input type="checkbox" name="like" value="棒球">   
    高尔夫：<input type="checkbox" name="like" value="高尔夫">   
    足球：<input type="checkbox" name="like" value="足球">   <br>
   </td>
  </tr>
  <tr>
   <td>
    <input type="button" class="allcheck" value="全选">
    <input type="button" class="nocheck" value="取消">
    <input type="button" class="recheck" value="反选">
    <input type="button" class="enter" value="提交">
   </td>
  </tr>
</table>
</form>

ebonyzhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中的复选框操作

$(document).ready(function(){ var $likebox=$("[name=like]:checkbox");//把复选框组赋给一个变量； var $allcheck=$(":checkbox[name=allcheck]")//把全选复选框赋给一个变量； function checks(){ var flag=true; $likebox
复制链接

扫一扫