Question

我正在创建一个复选框组，如下所示。将增加20至30组。

不是像下面那样为每个复选框组编写jQuery，而是可以通过for循环迭代吗？

我尝试了遍历循环，但未按预期工作。

$('.checkbox-1 .done-check').change(function() {
  $('.checkbox-1 .done-check').prop('checked', false);
  $(this).prop('checked', true);
});

$('.checkbox-2 .done-check').change(function() {
  $('.checkbox-2 .done-check').prop('checked', false);
  $(this).prop('checked', true);
});

$('.checkbox-3 .done-check').change(function() {
  $('.checkbox-3 .done-check').prop('checked', false);
  $(this).prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
        </label>
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
        </label>
</div>

<div class="form-check checkbox-2">
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
        </label>
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
        </label>
</div>

<div class="form-check checkbox-3">
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
        </label>
  <label class="form-check-label">
            <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
        </label>
</div>

Answer 1

是的，迭代将更加有效。另外，让我们稍微清理一下选择器。像$('.checkbox-3 .done-check')这样的选择器可以工作，但是效率低下，因为jQuery从右到左读取它们。而是使用$('.checkbox-3').find('.done-check')。

对于循环：

var max = 30; // or how ever you determine it
for(var i = 1; i <= max; i++)
{
    $('.checkbox-' + i).find('.done-check').change(function(){
        $('.checkbox-' + i).find('.done-check').prop('checked',false);
        $(this).prop('checked',true);
    });
}

现在，我不知道为什么在函数中有两条不同的线，因为它们都针对相同的元素，但是无论您的原因如何，这都是一种循环的方式。 / p>

Answer 2

您根本不需要循环。您只需要正确使用上下文查询即可。

$('.done-check').on('change', function(){
  if (this.checked) {
    $(this).closest('div.form-check').find('.done-check').not(this).prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
    </label>
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
    </label>
</div>

<div class="form-check checkbox-2">
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
    </label>
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
    </label>
</div>

<div class="form-check checkbox-3">
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
    </label>
    <label class="form-check-label">
        <input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
    </label>
</div>

选中复选框后，您会发现父form-check包装了已分组的复选框。然后，您找到嵌套的复选框，排除刚刚选中的复选框，然后将其余复选框标记为未选中。

对于循环迭代-复选框自动递增no

2 个答案: