jquery 单选全选

最新推荐文章于 2022-07-02 17:17:06 发布

灵魂清零

最新推荐文章于 2022-07-02 17:17:06 发布

阅读量200

点赞数

分类专栏： HTML 文章标签： jq单选全选 js单选全选

本文链接：https://blog.csdn.net/n_229397218/article/details/103709423

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div>
           <ul class="beyond-table normal">
               <li class="item">
                   <table class="table mb-20">
                       <tbody>
                           <tr>
                               <th class="w10"><input type="checkbox" class="check" name="question"></th>
                               <th>姓名</th>
                               <th>性别</th>
                               <th>职务</th>
                               <th>手机</th>
                               <th>办公电话</th>
                               <th>部门</th>
                               <th>离职</th>
                               <th>备注</th>
                           </tr>
                           <tr>
                               <td class="w10"><input type="checkbox" class="check" name="radios"></td>
                               <td >张三</td>
                               <td>女</td>
                               <td>销售经理</td>
                               <td>12457895424</td>
                               <td>001-26574525</td>
                               <td>销售部</td>
                               <td>是</td>
                               <td>备注消息</td>
                           </tr>
                           <tr>
                               <td class="w10"><input type="checkbox" class="check" name="radios"></td>
                               <td >张三</td>
                               <td>女</td>
                               <td>销售经理</td>
                               <td>12457895424</td>
                               <td>001-26574525</td>
                               <td>销售部</td>
                               <td>是</td>
                               <td>备注消息</td>
                           </tr>
                           <tr>
                               <td class="w10"><input type="checkbox" class="check" name="radios"></td>
                               <td >张三</td>
                               <td>女</td>
                               <td>销售经理</td>
                               <td>12457895424</td>
                               <td>001-26574525</td>
                               <td>销售部</td>
                               <td>是</td>
                               <td>备注消息</td>
                           </tr>
                       </tbody>
                   </table>
               </li>
           </ul>
       </div>
       <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function () {
           //全选
           $("input[name=question]").click(function () {
           if (this.checked) {
           $("input[name=radios]:checkbox").prop("checked", true);
           } else {
           $("input[name=radios]:checkbox").prop("checked", false);
           }
           });
               //单选
               $("input[name='radios']").click(function(){
                   var radioLen = $("input[name='radios']").length;
                   var len = $("input[name='radios']:checkbox:checked").length;
                   if(len == radioLen){
                       $("input[name=question]:checkbox").prop('checked', true);
                   }else{
                       $("input[name=question]:checkbox").prop('checked', false);
                   }
               })
           });

       </script>