9顶

JQUERY实现分组点击 ”全选“ 把所有组里面的 checkbox 都选中

稿源：互联网 2018-09-05 01:46:20 点击： 5134 撤稿纠错

实现如下： 1. 点击 ”全选“ 把所有组里面的 checkbox 都选中 2. 选中组后面的checkbox后，选中该组下面的子checkbox

以下讨论的是和JQUERY 全选 checkbox相关的JQUERY实现分组点击 ”全选“ 把所有组里面的 checkbox 都选中教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <script src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
<style type="text/css">
.hidden {
    display: none !important;
}
#child{
 margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(function(){
 $('div.all > label :checkbox').on('change',function(){
  var $checkboxs = $(this).parent().siblings().find(':checkbox');
  $checkboxs.attr('checked',$(this).prop('checked'));
 });
 $('div.all > div :checkbox').on('change',function(){
  var $box = $(this).closest('div');
  var $checkbox = $box.siblings('label').find(':checkbox');
  if($box.find(':checked').size()==$box.find(':checkbox').size()){
   $checkbox.attr('checked',true);
  }
  else{
   $checkbox.attr('checked',false);
  }
 })
});
</script> 
</head>
<body>

 <div class="all">
  <a href="http://js.alixixi.com">返回</a><input id="all" type="checkbox" />全选</label>
  <div>
   <label><input type="checkbox" name="ulist[]" value="1" />A</label>
   <label><input type="checkbox" name="ulist[]" value="2" />B</label>
   <label><input type="checkbox" name="ulist[]" value="3" />C</label>
  </div>
 </div>

 <div class="all">
  <label><a href="http://js.alixixi.com">返回</a><input id="all" type="checkbox" />全选</label>
  <div>
   <label><input type="checkbox" name="ulist[]" value="1" />A</label>
   <label><input type="checkbox" name="ulist[]" value="2" />B</label>
   <label><input type="checkbox" name="ulist[]" value="3" />C</label>
  </div>
 </div>

 <div class="all">
  <label><a href="http://js.alixixi.com">返回</a><input id="all" type="checkbox" />全选</label>
  <div>
   <label><input type="checkbox" name="ulist[]" value="1" />A</label>
   <label><input type="checkbox" name="ulist[]" value="2" />B</label>
   <label><input type="checkbox" name="ulist[]" value="3" />C</label>
  </div>
 </div>

</body>
</html>

关于JQUERY实现分组点击 ”全选“ 把所有组里面的 checkbox 都选中的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090592026.shtml方便下次再访问哦。

·上一篇： js制作自定义横向及竖向的滚动条特效
·下一篇： JQUERY+CSS3实现简单的瀑布流模型排列展示

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

JQUERY实现分组点击 ”全选“ 把所有组里面的 checkbox 都选中

文章分类LIST >>返回首页

最新游戏

最新新闻