Mitu märkeruutu Valige Tühista valimine jQuery abil
Veebirakenduste väljatöötamise ajal peame tavaliselt tegema CRUD-toiminguid. Loendivaate jaoks oli meil varem mitme reaga tabel. Igas reas hoiame märkeruutu konkreetse rea märkimiseks / tühjendamiseks. Neid märkeruute kasutatakse siis, kui kasutaja soovib andmebaasist rida kustutada. Sellel võib olla ka hulgi kustutamise funktsioon, kus vanem märkeruut kasutas lapse märkeruutude valimist / tühistamist.
Selles artiklis uurime, kuidas teha jQuery abil mitu märkeruutu / tühistada nende märkimine.
Meie viimane vaade on selline, nagu on näidatud alloleval ekraanipildil. See näitab pealkirja real vanema märkeruutu ja igal real on oma märkeruut.
Vanemate märkeruudu märkimisel märgitakse kõik lapse märkeruudud. Ja kui tühistame vanema märkeruudu, peaksid lapse märkeruudud olema märkimata. Olgu öeldud, et vaatame, kuidas rakendada jQuery abil mitu märkeruutu.
Looge Bootstrapis näidistabel
Alustamiseks vajame tabelit, kus on mõned kirjed koos märkeruutudega. Allpool olevas koodis loo Bootstrapi abil näiv tabel. Olen tabelisse lisanud ka näivkirjed.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">
<table class="table">
<thead>
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="1"/></td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="2"/></td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="3"/></td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6 col-md-4"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Kui käivitate ülaltoodud HTML-faili brauseris, näete tabelit, mis sisaldab 4 rida. Esimene rida on mõeldud pealkirjade jaoks ja esimene veerg märkeruutude jaoks. Nüüd kirjutame jQuery koodi, mis teeb märkeruutudesse tegelikku võluväge.
jQuery kood, mis valib mitu märkeruutu / tühistab nende valimise
jQuery pakub meetodeid ja sündmusi, mille abil saame oma eesmärgi saavutada. Siin kasutan meie ülesande täitmiseks clicksündmust ja propmeetodit.
<script type="text/javascript">
jQuery(function($) {
$('body').on('click', '#selectall', function() {
$('.singlechkbox').prop('checked', this.checked);
});
$('body').on('click', '.singlechkbox', function() {
if($('.singlechkbox').length == $('.singlechkbox:checked').length) {
$('#selectall').prop('checked', true);
} else {
$("#selectall").prop('checked', false);
}
});
});
</script>Ülaltoodud kood kontrollib, kas vanema märkeruut on märgitud. Kui see on nii, siis kontrollib see kõiki märkeruute. Kui tühjendate vanema märkeruudu, tühistab see ka kõigi laste märkeruudud.
Loodan, et saate aru, kuidas jQuery abil märkeruudud valida / tühistada. Tahaksin kuulda teie mõtteid allpool olevast kommentaaride jaotisest.