Wie wählt man alle Kontrollkästchen aus und bricht die Auswahl ab, wenn man über jQuery auf ein Kontrollkästchen klickt?

-1

Wie wählt man alle Kontrollkästchen aus und bricht die Auswahl ab, wenn man über jQuery auf ein Kontrollkästchen klickt?Wie wählt man alle Kontrollkästchen aus und bricht die Auswahl ab, wenn man über jQuery auf ein Kontrollkästchen klickt?

Die HTML ist wie folgt.
Als ich das Kontrollkästchen Select all,
alle Kontrollkästchen darunter
es ausgewählt haben, werden wieder Namen klicken und klicken Sie auf, alle Kontrollkästchen unten, damit er wird abgebrochen.

Wie es geht, gibt es eine Demo?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'> 
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet"> 
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet"> 
</head> 
<body> 

<div class="container"> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span>Select all 
       </label> 
      </th> 
      <th>Name</th> 
      <th>Age</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
       <input type="checkbox"> 
       <span class="c-indicator"></span> 
      </label> 
      </td> 
      <td>Jim</td> 
      <td>19</td> 
     </tr> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span> 
       </label> 
      </td> 
      <td>Lucy</td> 
      <td>18</td> 
     </tr> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span> 
       </label> 
      </td> 
      <td>Lily</td> 
      <td>18</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 
</body> 
</html>

Quelle

2016-04-29 zwl1619

Sie müssen versuchen, etwas selbst. SO ist kein Code-Schreibdienst. Stechen Sie auf etwas ein, wenn etwas schief geht oder Sie Hilfe brauchen, kommen Sie zurück und zeigen Sie uns, wo Sie hinkommen. – Utkanos

Bereits beantwortet worden hier: http: //stackoverflow.com/questions/9669005/jquery-toggle-select-all-checkboxes – Birdman

Geben Sie Ihrem Alles auswählen eine ID-Kontrollkästchen:

<input type="checkbox" id="selectall">

alle Kontrollkästchen Sie eine Klasse zu wählen, geben möchten:

<input type="checkbox" class="checkboxSelection">

JQuery:

$("#selectall").change(function() { 
    if($(this).is(":checked")) { 
     $(".checkboxSelection").each(function() { 
      $(this).prop('checked', true); 
     }); 
    } 
    else { 
     $(".checkboxSelection").each(function() { 
      $(this).prop('checked', false); 
     }); 
    }  
});

Sie möchten wahrscheinlich auch das Kontrollkästchen Alle auswählen t o deaktiviert werden, wenn einer der anderen nicht markiert ist und überprüft, ob alle geprüft:

$(".checkboxSelection").change(function() { 
    var allSelected = true; 

    $(".checkboxSelection").each(function() { 
     if(!$(this).is(":checked")) { 
      $("#selectall").prop('checked', false); 
      allSelected = false; 
     } 
    }); 

    if(allSelected) 
     $("#selectall").prop('checked', true); 
});

Quelle

2016-04-29 16:21:40

Danke! noch eine Sache, ich möchte das Kontrollkästchen "Alle auswählen" aktivieren, wenn ich manuell alle Kontrollkästchen darunter aktivieren. – zwl1619

@ zwl1619 Siehe meine bearbeitete Version –

Entschuldigung, 'alle die Checkbox' shoule sein 'alle Checkboxen.' In der bearbeiteten Version, wird das' Select All' Checkbox ausgewählt, wenn man einen – zwl1619

Ich habe eine Demo, aber Sie müssen betrachten und versuchen, zu verstehen, nicht nur es verwenden, ist es sehr Basci Logik, versuche dich an die Syntax zu gewöhnen und es wird einfach.

https://jsfiddle.net/vbrcfrn6/

$('#selectAll').on('change', function(){ 
    var state = $(this).prop('checked'); 
    $('.table input[type="checkbox"]').each(function(){ 
     $(this).prop('checked', state); 
    }); 
});

Ich habe eine id = "selectAll" im Eingang für Alles markieren

* in '.table' in Selektor, um die Aktion zu machen begrenzen nur in dieser Tabelle die Kontrollkästchen

Quelle

2016-04-29 16:23:28 evandrobm

Dadurch werden alle Kontrollkästchen auf der Seite aktiviert. Das OP sollte dies nur berücksichtigen. –

Ja, um zu begrenzen, können wir die Tabellenklasse einfügen, os eine Klasse in jeder Eingabe, die dies erhalten wird – evandrobm

$('input[type="checkbox"]').first().on('change', function(){ 
    $('input[type="checkbox"]').each(function(){ 
    $(this).prop('checked', $('input[type="checkbox"]').first().is(':checked')); 
    }); 
});

Nur ein kurzer Schnipsel hier finden Geige: https://jsfiddle.net/k2oeh80w/

Quelle

2016-04-29 16:25:56 zoubida13

Wie wählt man alle Kontrollkästchen aus und bricht die Auswahl ab, wenn man über jQuery auf ein Kontrollkästchen klickt?

Antwort

Verwandte Themen