Question

我希望在用户单击表格行时选择无线电输入，并将所选类别添加到单击的表格行，因此一次只能选择1个无线电和1行。

我有这个工作，但不知怎的，我设法删除了正常的功能 - 当你尝试点击无线电输入或它的标签时，它不会检查。

Html：

<table class="table table--highlight">
<thead>
  <tr>
      <th scope="col"><span class="visuallyhidden">Select an   
       option</span></th>
      <th scope="col">Turnover</th>
      <th scope="col">Plan Price</th>
      <th scope="col">Other</th>
  </tr>
</thead>
<tbody>
  <tr class="">
      <td class="text-center">
          <input type="radio" name="company-turnover" id="0-74999" 
  value="0-74999">
      </td>
      <th scope="row">
          <label for="0-74999">£0 - £74,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr class="">
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="75,000-99999" value="75000-99999">
      </td>
      <th scope="row">
          <label for="75,000-99999">£75,000 - £99,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr class="">
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="100000-199999" value="100000-199999">
      </td>
      <th scope="row">
          <label for="100000-199999">£100,000 - £199,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr class="selected">
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="200000-349999" value="200000-349999">
      </td>
      <th scope="row">
          <label for="200000-349999">£200,000 - £349,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover"  
   id="350000-699999" value="350000-699999">
      </td>
      <th scope="row">
          <label for="350000-699999">£350,000 - £699,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr class="">
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="700000-999999" value="700000-999999">
      </td>
      <th scope="row">
          <label for="700000-999999">£700,000 - £999,999</label>
      </th>
      <td>£XX</td>
      <td>£150</td>
  </tr>
  <tr class="">
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="1000000-1499999" value="1000000-1499999">
      </td>
      <th scope="row">
          <label for="1000000-1499999">£1,000,000 - £1,499,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="1500000-2499999" value="1500000-2499999">
      </td>
      <th scope="row">
          <label for="1500000-2499999">£1,500,000 - £2,499,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="2500000-3499999" value="2500000-3499999">
      </td>
      <th scope="row">
          <label for="2500000-3499999">£2,500,000 - £3,499,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover"  
    id="3500000-5999999" value="3500000-5999999">
      </td>
      <th scope="row">
          <label for="3500000-5999999">£3,500,000 - £5,999,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
    id="6000000-9999999" value="6000000-9999999">
      </td>
      <th scope="row">
          <label for="6000000-9999999">£6,000,000 - £9,999,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
    id="10000000-14999999" value="10000000-14999999">
      </td>
      <th scope="row">
          <label for="10000000-14999999">£10,000,000 - 
     £14,999,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
   id="15000000-24999999" value="15000000-24999999">
      </td>
      <th scope="row">
          <label for="15000000-24999999">£15,000,000 - 
    £24,999,999</label>
      </th>
      <td>£XX</td>
      <td>£300</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" 
    id="25000000-49999999" value="25000000-49999999">
      </td>
      <th scope="row">
          <label for="25000000-49999999">£25,000,000 - 
    £49,999,999</label>
      </th>
      <td>£XX</td>
      <td>£600</td>
  </tr>
  <tr>
      <td class="text-center">
          <input type="radio" name="company-turnover" id="50000000+" 
     value="50000000+">
      </td>
      <th scope="row">
          <label for="50000000+">£50,000,000 and above</label>
      </th>
      <td>£XX</td>
      <td>£600</td>
  </tr>

  </tbody>
   </table>

jquery的

$(function() {
  var $tableRows = $('.table--highlight tr');
  $tableRows.click(function() {
    var self = $(this);
    var siblings = self.siblings();
    self.addClass('selected');
    siblings.removeClass('selected');
    self.find('input:radio').prop('checked', function(idx, oldProp) {
        return !oldProp;
    });
  });
 });

Answer 1

试试此代码

 $(function() {
var $tableRows = $('.table--highlight tr');
$tableRows.click(function() {
  var self = $(this);
  var siblings = self.siblings();
  self.addClass('selected');
  siblings.removeClass('selected');
  self.find('input:radio').prop('checked',true);
});
});

希望这会对你有所帮助。

单击行，检查无线电输入，将选定的类添加到表行

1 个答案: