jquery全选 选中所有checkbox,再次点击取消全选,可以反复点击,解决了点击一次后再次点击不能选中的问题

<!DOCTYPE html>
<html>
<head>
    <title>checkbox的多选</title>
</head>
<body>
     <table border="1" id="table11" width="350px" height="200px" align="center">
         <tr>
             <th>选项</th>
             <th>编号</th>
             <th>姓名</th>
             <th>性别</th>
             <th>薪资</th>
         </tr>
        <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650(元)</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650(元)</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650(元)</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650(元)</td>
        </tr>
     </table>
     <table border="1" align="center">
         <tr>
             <td style="height: 20px;width:340px">
                 <span><input type="checkbox" name="" id="chkAll">全选</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <!--<span><input type="checkbox" name="" id="chkAll1">取消</span>-->
             </td>
         </tr>
     </table>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){
             $("table tr:nth-child(odd)").css("background-color","#eee");//奇数行变色
             //全选点击函数
             $("#chkAll").click(function(){
                 if(this.checked){//如果自己被选中
                     //$("input[type=checkbox]").prop("checked", "true");
                     $("input[name=checkbox]").prop("checked", "true");
                 }
                 else{
                     //$("input[name=checkbox]").removeAttr("checked");失效
                     //$("input[name=checkbox]").prop("checked", "false");失效
                     //$("input[value='全选']").on('click',function(){this.checked = false;}) 失效
                     $("input[name='checkbox']").each(function(){
                              this.checked=false;
                              });
                 }
             });
             
         });
     </script>
</body>
</html>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页