Question

我向下滚动了从服务器端自动更新的复选框列表。我想知道在选中复选框后是否可以自动检查列表中的下3个复选框。

例如我在列表中有5个复选框

<input type="checkbox" name = "c1" value="1"/>
<input type="checkbox" name = "c2"  value="2"/>
<input type="checkbox" name = "c3" value="3"/>    
<input type="checkbox" name = "c4" value="4"/>
<input type="checkbox" name = "c5"  value="5"/>

因此，当单击复选框2时，将自动检查接下来的3 - 这可能吗？

我搜索并使用我在Github上找到的复选框库进行搜索，但它只提供复选框的范围选择。

http://rmariuzzo.github.io/checkboxes.js/#limit-max-number-of-checked-checkboxes

Jsfiddle

Answer 1

使用nextAll和:lt(3)来获得下一个3。

$('[type="checkbox"]').change(function(){
  
  $(this).nextAll('[type="checkbox"]:lt(3)').prop('checked', this.checked);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name = "c1" value="1"/><br>
<input type="checkbox" name = "c2"  value="2"/><br>
<input type="checkbox" name = "c3" value="3"/><br>    
<input type="checkbox" name = "c4" value="4"/><br>
<input type="checkbox" name = "c5"  value="5"/><br>
<input type="checkbox" name = "c6"  value="6"/><br>
<input type="checkbox" name = "c7"  value="7"/><br>
<input type="checkbox" name = "c8"  value="8"/><br>

评论它适用于普通的复选框，但我不知道为什么它不起作用 office365复选框

office365复选框位于div容器中。这意味着您需要上升一个级别，然后是nextAll，然后找到3个容器内的复选框。

$('.f-choice input[type="checkbox"]').change(function() {
  $(this).parent().nextAll('.f-choice:lt(3)').find('[type="checkbox"]').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  office 365 checkboxes
</p>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>
<div class="ms-ChoiceField f-choice" data-hint="Users" data-value="SelectItem">
  <input id="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-input dataListField ng-pristine ng-untouched ng-valid" type="checkbox" ng-model="item.isChecked" ng-change="UpdatedSelectedUsers(item)" tabindex="0" aria-checked="false"
  aria-invalid="false">
  <label for="selectUser_07c4ab10-4ad0-44d1-9d65-aeee70be20a6" class="ms-ChoiceField-field"></label>
</div>

Answer 2

假设您只想检查当前框之前的框，并假设您设置了ID标记：

document.getElementById('c2').setAttribute('onclick', 'checkNextThree()');
function checkNextThree(){
    document.getElementById('c3').setAttribute('checked', 'checked');
    document.getElementById('c4').setAttribute('checked', 'checked');
    document.getElementById('c5').setAttribute('checked', 'checked');
}

当激活复选框c2时，它会设置要检查的下三个复选框。如果您需要执行下一个三个复选框，可能需要进行一些轻微的编辑，无论点击哪个复选框，都有这个概念。

JavaScript或jQuery自动检查下一个复选框 - Office365

2 个答案: