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

Question

>我正在创建一个如下所示的复选框组。它将以 20 到 30 个组为增量。

而不是为每个复选框组编写如下所示的jQuery，是否可以进行循环迭代？

我尝试了通过循环，但它没有按预期工作。

$('.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

你根本不需要循环。 您只需要正确使用上下文查找。

$('.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包装分组的复选框。 然后，找到嵌套的复选框，排除刚刚选中的复选框，然后将其余复选框标记为未选中。

Answer 2

是的，迭代会更有效率。 另外，让我们稍微清理一下您的选择器。 像$('.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);
    });
}

现在，我不知道为什么函数中有两条不同的行，因为它们都针对相同的元素，但无论您出于何种原因，这是执行循环的一种方法。