您的位置
主页 > 网站技术 > 语言编程 > » 正文

jquery复选框全选/取消示例

来源: 站长圈 点击:

jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 !

功能:

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

  }

 });

};

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




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明