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

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

假设您只想选中当前复选框之前的复选框，并假设您设置了它们的 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 被激活时，它将设置接下来要选中的三个复选框。如果无论单击哪个复选框都需要执行接下来的三个复选框，则可能需要进行一些轻微的编辑，但这是概念。

Answer 2

使用 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>

COMMENT it work on normal checkboxes however i wonder why it not works on office365 checkboxes

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>

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

JavaScript or jQuery to auto check next checkboxes - Office365

javascript

checkbox

jquery

office365