Useita valintaruutuja Valitse Poista valinta käyttämällä jQueryä
Verkkosovelluksia kehitettäessä meidän on yleensä suoritettava CRUD-operaatiot. Luettelonäkymässä meillä oli aiemmin taulukko, jossa oli useita rivejä. Pidämme jokaisella rivillä valintaruudun tietyn rivin valitsemiseksi / poistamiseksi. Nämä valintaruudut ovat käytössä, kun käyttäjä haluaa poistaa rivin tietokannasta. Sillä voi olla myös joukkopoistotoiminto, jossa vanhemman valintaruutu käytti lapsen valintaruutujen valitsemista / poistamista.
Tässä artikkelissa tutkitaan, kuinka voidaan valita / poistaa useita valintaruutuja jQueryä käyttämällä.
Viimeinen näkymämme on kuten alla olevassa kuvakaappauksessa. Se näyttää ylätason valintaruudun otsikkorivillä ja jokaisella rivillä on oma valintaruutunsa.
Vanhemman valintaruudun valitseminen tarkistaa kaikki lapsen valintaruudut. Ja kun poistat vanhemman valintaruudun valinnan, lapsen valintaruudut on poistettava. Sanotaan, että katsotaanpa, kuinka käytetään useita valintaruutuja, valitse / poista valinta jQueryn avulla.
Luo mallitaulukko Bootstrapiin
Aloittamiseen tarvitaan taulukko, jossa on joitain tietueita sekä valintaruudut. Seuraavassa koodissa luon nuken taulukon Bootstrapilla. Olen myös lisännyt taulukkomerkintöjä taulukkoon.
<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>Jos suoritat yllä olevan HTML-tiedoston selaimessa, näet taulukon, joka sisältää 4 riviä. Ensimmäinen rivi on tarkoitettu otsikkotarkoituksiin ja ensimmäinen sarake on valintaruutuja varten. Nyt aiomme kirjoittaa jQuery-koodin, joka tekee todellista taikuutta valintaruutuihin.
jQuery-koodi, joka valitsee / poistaa useita valintaruutuja
jQuery tarjoaa menetelmiä ja tapahtumia, joiden avulla voimme saavuttaa tavoitteemme. Täällä käytän clicktapahtumaa ja propmenetelmää tehtävämme suorittamiseen.
<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>Yllä oleva koodi tarkistaa, onko ylätason valintaruutu valittuna. Jos on, se tarkistaa kaikki valintaruudut. Kun poistat vanhemman valintaruudun valinnan, se poistaa kaikki lapsen valintaruudut.
Toivon, että ymmärrät kuinka tehdä valintaruudut / poistaa niiden valinta jQueryä käyttämällä. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.