当使用jquery单击表行时，选中复选框addclass

check checkbox addclass when table row clicked with jquery

本文关键字：复选框 addclass jquery 单击      更新时间：2024-01-20

我有一个表，我想选中复选框&在div中添加一个类当用户点击表行时，我无法让它添加该类。有人能告诉我哪里出了问题吗。

HTML下方：

<div class="widgit">
<table id="QR_table">
 <thead>
   <tr class="QR_table-row">
     <th class="qr_action">Checkbox</th>
     <th class="qr_action">Action</th>
     <th class="qr_from">FROM</th>
      <th class="qr_to">TO</th>
      <th class="qr_trans">Transport</th>
    </tr>
</thead>
<tbody>
    <tr class="QR-row">
        <td class="checkbox">
            <input class="modal-state" id="modal-1" type="checkbox" />
        </td>
        <td class="qr_action">PT</td>
        <td class="qr_from">4</td>
        <td class="qr_to">21</td>
        <td class="qr_trans">WC</td>
    </tr>
    <tr class="QR-row">
        <td class="checkbox">
            <input class="modal-state" id="modal-1" type="checkbox" />
        </td>
        <td class="qr_action">PT</td>
        <td class="qr_from">8</td>
        <td class="qr_to">2</td>
        <td class="qr_trans">T</td>
    </tr>        
</tbody>

JQUERY BLOW:

$(function() {
  $(".QR-row").click(function() {
    var $chk = $(this).find('input[type=checkbox]');
    $chk.prop('checked',!$chk.prop('checked'));
       if($($chk).is(':checked')){
        $(".widgit").addClass("modal-open");  
        } else {
          $(".widgit").removeClass("modal-open");
        }   
  });               
});

JSFIDDLE

从我的角度来看，一切都很好。

在你的小提琴中，你唯一的div就在你的桌子周围，它似乎是你试图给一个类的div。

<div class="widgit">
<table id="QR_table">

一切都很好。Fiddle

如果你想让它做其他事情，那么你必须更具体地说明你试图实现

相关文章：