全选反选复选框子类同步效果

原创 2016年06月01日 13:36:13
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<?php
$arr = ['a', 'b', 'c', 'd'];
?>
<table>
   <?php
    foreach ($arr as $k => $v) {
        ?>
        <tr>
            <td>
                <input  class="module_role_ids"   type="checkbox"/>
            </td>
            <td>
                <?php echo $v; ?>
            </td>
            <td>
                <?php echo $v; ?>
            </td>
            <td>
                <input type="checkbox"  class="action_role_ids"/>
                <input type="checkbox" class="action_role_ids"/>
                <input type="checkbox" class="action_role_ids"/>
            </td>
        </tr>
    <?php } ?>
</table>

<script>
    $('.module_role_ids').each(function () {
        $('.module_role_ids').each(function () {
            var _this = $(this);
            var _parent = _this.parents('tr');
            _this.change(function () {
                _parent.find('.action_role_ids').prop('checked', _this.prop('checked'));
            });
            _parent.find('.action_role_ids').change(function () {
                _this.prop('checked', _parent.find('.action_role_ids:not(:checked)').length <= 0);
            });
        });
    });
</script>
全选、全不选代码:
<pre name="code" class="javascript">      $("#allxz").on('click', function () {
            var isChecked = $(this).prop("checked");
            $("input[name='fh']").prop("checked", isChecked);
        });

具体可参看http://www.jb51.net/article/71067.htm


checkbox全选全不选、子chekbox全选非全选对应父checkbox选不选——全

jQuery实现CheckBox全选、全不选 $(function() { $("#checkAll").click(function() { ...
  • superit401
  • superit401
  • 2016年07月08日 16:40
  • 2666

jquery操作复选框全选反选选中 1.9与1.8区别

前段时间在用jQuery1.9版本中操作复选框总是出现选不中的情况,经过查询资料总结如下: 在jquery 1.8.及以下的版本,我们对于checkbox的选中与不选中操作如下:(一般用属性at...
  • lds2013
  • lds2013
  • 2014年03月12日 14:48
  • 487

javasctipt实现-复选框全选/反选的实现

以下是用原生js实现的复选框全选/反选的实现 选中checkbox的时候,实现全选的效果,并且样式发生改变。 代码最简洁,js行为优化版,复制粘贴即可使用。 ** 复选框...
  • garvisjack
  • garvisjack
  • 2017年01月30日 21:25
  • 739

jquery实现复选框(checkbox)的全选与反选

介绍一下jquery实现checkbox的全选与反选
  • u013871100
  • u013871100
  • 2016年10月06日 23:24
  • 607

使用js实现checkbox的全选与反选功能二

效果图如下:
  • Geek_ymv
  • Geek_ymv
  • 2014年10月23日 09:45
  • 708

复选框全选和反选例子

$(document).ready(function () { //全选或全不选 $("#all").click(functio...
  • Bling_Bling_
  • Bling_Bling_
  • 2016年12月21日 11:03
  • 277

最简单的checkbox全选反选操作

之前写过一个checkbox全选反选的功能,觉得很麻烦,后来发现一个特别简单就记录一下 jQuery实现CheckBox全选、全不选 $(function() { ...
  • linadadan
  • linadadan
  • 2017年08月25日 18:08
  • 124

js中checkbox中的全选和反选效果实现

Document //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选...
  • wangdajiao
  • wangdajiao
  • 2016年10月20日 10:54
  • 2614

layui结合form,table的全选、反选v1.0

layui结合form,table的全选、反选v1.0
  • zy1281539626
  • zy1281539626
  • 2017年05月17日 16:59
  • 3551

jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)

jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)     HTML代码: 全选/取消 子选框1 子选框2 子选框3   JS代码: ...
  • qq_37906257
  • qq_37906257
  • 2017年11月14日 12:49
  • 156
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:全选反选复选框子类同步效果
举报原因:
原因补充:

(最多只允许输入30个字)