当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery复选框全选/取消示例

jquery复选框全选/取消示例

2019年03月20日  | 移动技术网IT编程  | 我要评论

功能：

a:实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态

b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中

. 代码如下:


/**
 * 全选函数
 * @param mainid 主复选框id
 * @param klass 下属复选框的class
 */
function selectall(mainid,klass){
 $("." + klass).each(function(){
     if($("#" + mainid).attr("checked")== "checked"){
      $(this).attr("checked", "checked");
     }
     else{
      $(this).removeattr("checked");
     }
 });
}

 

以上实现全选及全部取消 所有子复选框，至于数据的实现则在控制器里接收到复选框的数组即可

 

. 代码如下:


/**
 * 子复选框有一个选中 父复选框就选中 <br>子复选框全不选 父复选框不选中
 * @param father 父复选框的id
 * @param son 子复选框的class
 */
function checksoncheckbox(father,son){
 $("."+son).click(function(){
  if($(this).attr("checked")== "checked"){
   $(this).addclass("checked");
  }else{
   $(this).removeclass("checked");
  }
  if($("."+son).hasclass("checked")){
   $("#"+father).attr("checked","checked");
//   console.log("至少有一个子复选框选中！");
  }else{
   $("#"+father).removeattr("checked");
//   console.log("所有子复选框都未选中！");
  }
 });
};

以上实现 一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网