Flera kryssrutor Markera Avmarkera med jQuery

Senaste uppdateringen okt 17, 2021

Innehåll

jQuery-kod som markerar / avmarkerar flera kryssrutor

När vi utvecklar webbapplikationer behöver vi vanligtvis utföra CRUD-operationer. För listvyn brukade vi ha en tabell med flera rader. I varje rad behåller vi en kryssruta för att markera / avmarkera en specifik rad. Dessa kryssrutor används när användaren vill radera en rad från databasen. Det kan också ha massraderingsfunktionalitet där den överordnade kryssrutan som används för att markera / avmarkera barnets kryssrutor.

I den här artikeln studerar vi hur du utför markera / avmarkera flera kryssrutor med jQuery.

Vår slutliga vy är som visas på skärmdumpen nedan. Den visar den överordnade kryssrutan i rubrikraden och varje rad har sin egen kryssruta.

Om du markerar kryssrutan för föräldern markeras alla kryssrutor för barn. Och när vi avmarkerar kryssrutan för föräldrar, bör barnets kryssrutor avmarkeras. Med detta sagt, låt oss se hur du använder flera kryssrutor markera / avmarkera med jQuery.

Skapa provtabell i Bootstrap

För att komma igång behöver vi en tabell med några poster tillsammans med kryssrutorna. I koden nedan skapar jag dummy-tabell med Bootstrap. Jag har också lagt till dummy-poster i tabellen.

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

Om du kör ovanstående HTML-fil i webbläsaren ser du en tabell som innehåller fyra rader. Den första raden är för rubrikändamål och den första kolumnen är för kryssrutorna. Nu ska vi skriva jQuery-kod som gör verklig magi i kryssrutorna.

jQuery-kod som markerar / avmarkerar flera kryssrutor

jQuery tillhandahåller metoder och händelser som vi kan nå vårt mål. Här kommer jag att använda clickhändelse och propmetod för att utföra vår uppgift.

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

Ovanstående kod kontrollerar om den överordnade kryssrutan är markerad. Om det är så markerar det alla kryssrutor. När du avmarkerar kryssrutan för föräldern, avmarkeras den också för alla underordnade kryssrutor.

Jag hoppas att du förstår hur du markerar / avmarkerar kryssrutor med jQuery. Jag skulle vilja höra dina tankar i kommentarfältet nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net