JavaScript oder jQuery, um die nächsten Kontrollkästchen automatisch zu aktivieren - Office365

Question

Ich habe die Kontrollkästchenliste automatisch von der Serverseite auf Bildlauf nach unten aktualisiert. Ich möchte wissen, ob es möglich ist, die nächsten 3 Checkboxen in der Liste automatisch zu aktivieren, nachdem das Kontrollkästchen aktiviert wurde.

zum Beispiel habe ich 5 Kontrollkästchen in der Liste

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

Also, wenn Checkbox 2 auto geprüft geklickt wird dann die nächsten 3 - ist das möglich?

Ich suchte und spielte mit einer Checkbox-Bibliothek, die ich auf Github fand, aber es bietet nur eine Auswahl von Kontrollkästchen.

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

Jsfiddle

Answer 1

Verwendung nextAll mit :lt(3) die nächsten 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>

KOMMENTAR es auf normales Kontrollkästchen Arbeit kommen aber ich, warum es nicht funktioniert fragen, auf Office365 Ankreuzfelder

office365 Checkboxen sind in div-Containern. Das bedeutet, dass Sie eine Ebene höher gehen müssen, dann nextAll, dann finden Sie das Kontrollkästchen in den 3 Containern.

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

Angenommen, Sie wollen einfach nur vor dem aktuellen einfach die Felder, und vorausgesetzt, Sie ihre ID-Tags gesetzt:

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

Wenn das Kontrollkästchen c2 aktiviert ist, Es legt die nächsten drei Kontrollkästchen fest, die überprüft werden sollen. Einige geringfügige Änderungen können erforderlich sein, wenn Sie die nächsten drei Kontrollkästchen aktivieren müssen, unabhängig davon, auf was geklickt wird, aber es gibt das Konzept.