Auswählen mehrerer Optionsfelder mit der Option "Alle auswählen"

Question

Ich habe ein Formular, in dem dem Benutzer eine Liste von Optionsfeldern angezeigt wird. Es gibt auch eine Option, um alle Schaltflächen in einer bestimmten Spalte auszuwählen. Die Auswahl funktioniert beim ersten Mal einwandfrei, aber wenn ich zwischen den beiden hin- und herwechseln möchte, bricht sie ab.

Wie kann ich alle Optionsfelder in einer einzelnen Spalte mit nur einem Klick auswählen?

function checkAll(e) { 
 
    if (e.hasClass('allFirst')) { 
 
    $('.first').attr('checked', 'checked'); 
 
    } else { 
 
    $('.second').attr('checked', 'checked'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="A" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="A" class="second" />2</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="B" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="B" class="second" />2</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="C" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="C" class="second" />2</td> 
 
    </tr> 
 
</table> 
 
<input type="radio" name="all" class="allFirst" onclick="checkAll($(this));" />Select All #1 
 
<input type="radio" name="all" class="allSecond" onclick="checkAll($(this));" />Select All #2

Wenn Sie "Alle auswählen 1 #", dann "Alle auswählen 2 #", dann "Alle auswählen # 1" wieder, wird nicht der dritte Versuch, die Radio-Buttons überprüfen.

https://jsfiddle.net/jb7gfev9/

Answer 1

Sie müssen jquery verwenden .prop() statt .attr()

function checkAll(e) { 
 
    if (e.hasClass('allFirst')) 
 
    $('.first').prop('checked', true); 
 
    else 
 
    $('.second').prop('checked', true); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="A" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="A" class="second" />2</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="B" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="B" class="second" />2</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="C" class="first" />1</td> 
 
    <td> 
 
     <input type="radio" name="C" class="second" />2</td> 
 
    </tr> 
 
</table> 
 
<input type="radio" name="all" class="allFirst" onclick="checkAll($(this));" />Select All #1 
 
<input type="radio" name="all" class="allSecond" onclick="checkAll($(this));" />Select All #2

Answer 2

Versuchen attr-prop ändern.

Weitere Informationen finden Sie unter this question.

Answer 3

nur ein wenig Kontext zu Mohammad Antwort, in diesem Fall .attr() gilt für den Standardzustand hinzuzufügen, während .prop() gilt für den aktuellen Status des DOM-Baums, daher wird hier der Wert in togging angegeben. In Situationen, in denen der Benutzer Attributwerte aktualisieren kann, verwenden Sie .prop(), um die aktuellen Werte abzurufen.