Question

我创建了一个动态表。在每一行中，我添加了两个复选框buy和sell，每个复选框都有一个.checkboxClass类。我希望用户能够选择buy或sell，但不能同时选择。{/ p>

到目前为止，这是我的代码：

$('input.checkboxClass').on('click', function() {
    $('input.checkboxClass').not(this).prop('checked', false);
});

这只适用于一行。随着更多行的添加，它会失败。这是因为整个表格中都会重复checkboxClass，这意味着该脚本一次只允许您选择一个复选框。

Answer 1

我无法相信到目前为止还没有人提出这个建议。您的问题是对HTML的一般误解。这是不的复选框。你应该使用单选按钮：

<div>
  <input type="radio" name="radio1" value="buy" id="buy">
  <label for="buy">buy</label>
  <input type="radio" name="radio1" value="sell" id="sell">
  <label for="sell">sell</label>
</div>

这将为您自动执行此功能。无需脚本。

Answer 2

由于您没有显示您的HTML，我认为您的内容类似于：

<table>
    <tr>
        <td>Product 1 </td>
        <td><input type="checkbox" class="checkboxClass" />Buy</td>
        <td><input type="checkbox" class="checkboxClass" />Sell</td>        
    </tr>
    <tr>
        <td>Product 2 </td>
        <td><input type="checkbox" class="checkboxClass" />Buy</td>
        <td><input type="checkbox" class="checkboxClass" />Sell</td>        
    </tr>
    <tr>
        <td>Product 3 </td>
        <td><input type="checkbox" class="checkboxClass" />Buy</td>
        <td><input type="checkbox" class="checkboxClass" />Sell</td>        
    </tr>
</table>

JavaScript代码：

$('input.checkboxClass').on('click', function() {
    $(this).parent().parent().find('.checkboxClass').prop('checked', false);
    $(this).prop('checked', true)
});

DEMO

注意1：您可以根据HTML结构调整JavaScript代码

注意2：我宁愿在这个用例中使用无线电，而不是复选框

如何从动态表中选择一个或其他或没有复选框？

2 个答案: