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

Question

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

例如我在列表

<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"/> 

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

我搜索并使用Gi​​thub上发现的复选框库进行播放，但它仅提供复选框的范围选择。

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>

COMMENT它正常工作复选框但是我不知道为什么它不 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被激活，它会设置接下来的三个复选框进行检查。如果您需要执行下一个三维复选框，无论点击哪个复选框，都可能需要进行轻微的编辑，但这里有个概念。