jquery 复选框全选/全不选切换普通DOM元素点击选中/取消选中切换

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_34332905

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moli-/p/6385944.html

版权

1.要选中的复选框设置统一的name 用prop()

prop() 方法设置或返回被选元素的属性和值。

$("#selectAll").click(function(){
    $("input[name='selectfile']").prop("checked",$(this).prop("checked"));
});

<table style="text-align: center">
    <tbody>
        <tr>
            <td><input type="checkbox" id="selectAll" ><span>全部</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selectfile"><span>AVI</span></td>
        </tr>
    </tbody>
</table>

2.给需要点击选中的DOM元素设置统一name作为标识 通过改变class的值来实现选中/取消选中的页面效果 ,可以一组里面只有一个选中,或者一组里面可以多个选中

var sel_class=" select_me" //注意  空格


$('[name="select_li"]').click(function(){
　　　　　//用toggleClass()方法切换选中样式
           $(this).toggleClass(sel_class)
　　　　　//点击事件触发时先把同一组的所有样式设置为gmyzj_name4 相当于全部取消选中,再给当前点击的DOM元素添加选中的样式
//         $('[name="select_li"]').attr('class', "gmyzj_name4");
//         $(this).attr('class', "gmyzj_name4" + sel_class);
   })

<ul style="list-style:none ">
    <li class="gmyzj_name4" name="select_li">111111111111</li>
    <li class="gmyzj_name4" name="select_li">222222222</li>
    <li class="gmyzj_name4" name="select_li">33333333</li>
    <li class="gmyzj_name4" name="select_li">4444444444</li>
</ul>

转载于:https://www.cnblogs.com/moli-/p/6385944.html