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

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

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

​

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

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