jquery复选框全选/取消示例

前端技术 2023/09/06 JavaScript

功能：

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(\"所有子复选框都未选中！\");
  }
 });
};

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

本文地址：https://www.stayed.cn/item/15708

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案