Question

我是jQuery的新手。我想通过单击一个单选按钮从tr中选择table这是一个正常工作的代码，但我觉得有一种更好的方式来编写这段代码。有任何想法吗？

var checkedRadioList = $("input[type='radio']:checked");
var radioList = $("input[type='radio']");
radioList.each(function() {
  $(this).on("change", function() {
    var selectedRadio = $(this);
    if (selectedRadio.parents("tr").hasClass("chekecedTr")) {
      selectedRadio.removeAttr("checked").parents("tr").removeClass("chekecedTr");
    } else {
      selectedRadio.attr("checked", "checked").parents("tr").addClass("chekecedTr");
    }

    checkedRadioList.each(function() {
      $(this).removeAttr("checked").parents("tr").removeClass("chekecedTr");
    });
    checkedRadioList = $("input[type='radio']:checked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>בחר
      </th>
      <th>מקט
      </th>
      <th>תאור
      </th>
      <th>מחיר
      </th>
      <th>מבצע באתר
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td>
        <input type="radio" value="1039">
      </td>
      <td>1039
      </td>
      <td> <span> פלסטלינה רפואית 57 גר` - צהוב</span> 
      </td>
      <td>44 ש"ח
      </td>
      <td></td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20030">
      </td>
      <td>20030
      </td>
      <td>פלסטלינה רפואית 57 גר` - אדום

      </td>
      <td>44 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20031">
      </td>
      <td>20031
      </td>
      <td>פלסטלינה רפואית 57 גר` - ירוק

      </td>
      <td>44 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20032">
      </td>
      <td>20032
      </td>
      <td>פלסטלינה רפואית 57 גר` - כחול

      </td>
      <td>44 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="chekecedTr">
      <td>
        <input type="radio" value="20033" checked="checked">
      </td>
      <td>20033
      </td>
      <td>פלסטלינה רפואית 85 גר` - צהוב

      </td>
      <td>57 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20034">
      </td>
      <td>20034
      </td>
      <td>פלסטלינה רפואית 85 גר` - אדום

      </td>
      <td>57 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20035">
      </td>
      <td>20035
      </td>
      <td>פלסטלינה רפואית 85 גר` - ירוק

      </td>
      <td>57 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" value="20036">
      </td>
      <td>20036
      </td>
      <td>פלסטלינה רפואית 85 גר` - כחול

      </td>
      <td>57 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20037">
      </td>
      <td>20037
      </td>
      <td>פלסטלינה רפואית 460 גר` - צהוב

      </td>
      <td>165 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20038">
      </td>
      <td>20038
      </td>
      <td>פלסטלינה רפואית 460 גר` - אדום

      </td>
      <td>165 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20039">
      </td>
      <td>20039
      </td>
      <td>פלסטלינה רפואית 460 גר` - ירוק

      </td>
      <td>165 ש"ח
      </td>
      <td>
      </td>
    </tr>
    <tr class="">
      <td>
        <input type="radio" value="20040">
      </td>
      <td>20040
      </td>
      <td>פלסטלינה רפואית 460 גר` - כחול

      </td>
      <td>165 ש"ח
      </td>
      <td>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">בחר כמות
        <select>
          <option value="0">בחר</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </td>
      <td colspan="2">
        <a class="btn btn-primary buyBtn">הוסף לסל</a>
      </td>
    </tr>
  </tfoot>
</table>

Answer 1

对于事件绑定和操作属性，您没有each()。

$(document).ready(function() {
    $("input[type='radio']").on("change", function() {
        // Use closest() instead of parent() for better performance 
        $(this).closest("tr").toggleClass('chekecedTr', this.checked); // You can use toggleClass()


        $("input[type='radio']:checked")
            .not(this)
            .prop("checked", false).closest("tr")
            .removeClass("chekecedTr");
    });
});

Answer 2

我正在使用这个，请查看。

$('#tableSelect tr').click(function(){
    $(this).find('input[type=radio]').prop('checked', true);
});

jQuery：从表中选择输入无线电

2 个答案: