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

时间:2019-07-10 16:46:53

标签: javascript jquery

我正在创建一个复选框组,如下所示。将增加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>

2 个答案:

答案 0 :(得分:0)

是的,迭代将更加有效。另外,让我们稍微清理一下选择器。像$('.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>

答案 1 :(得分:0)

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

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