关闭

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

167人阅读 评论(0) 收藏 举报
分类:
<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


0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21242次
    • 积分:678
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:27篇
    • 译文:0篇
    • 评论:3条
    最新评论