Ich habe folgendes
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' value="">ciao</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
</div>
</div>
</form>
Wenn Sie auf das erste Kontrollkästchen klicken, werden alle Kontrollkästchen in der zweiten Abteilung mit der ID "check 21" automatisch aktiviert.
<script>
function handleChange(cb) {
if(cb.checked == true) {
document.getElementById("check21").checked = true;
alert('eyaicecold');
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
Ich habe das folgende Skript verwendet, das funktioniert, aber nur für das erste. Ich möchte die IDs verwenden, da der Name und der Wert verwendet werden, um die SQL-Anfrage über das Formular zu senden.
2 Antworten
Wie in den Kommentaren erwähnt, müssen die IDs eindeutig sein, damit Sie sie bei Bedarf in Klassen ändern können. Dann können Sie diese jQuery verwenden:
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
})
Entfernen Sie auch diese Inline-Ereignishandler.
Die Idee hinter IDs ist, dass sie einzigartig sind. Auf diese Weise können Sie ein einzelnes Element mit der Funktion getElementById abrufen, während andere getElementsByXXX -Funktionen eine Liste von Elementen zurückgeben (daher das s in getElement s ).
Wenn Sie die POST-Daten abrufen (über PHP oder eine andere Serversprache), müssen Sie überprüfen, ob die Variable, die wie das Namensattribut aufgerufen wird, festgelegt ist. Wenn dies der Fall ist, wurde das Kontrollkästchen aktiviert. Es funktioniert nicht, mehrere Kontrollkästchen mit demselben Namen wie Sie zu haben. Diese andere SO-Antwort erklärt, wie POST-Daten aus Kontrollkästchen sehr gut verwendet werden.
Wenn Sie sich für die Notation name="something[]" entscheiden, können Sie alle Kontrollkästchen des zweiten Divs aktivieren mit:
var checkboxes = myDiv.getElementsByName("something[]");
for(var i=0; i < checkboxes.length; ++i) {
checkboxes[i].checked = true;
}
Sie könnten auch Klassen verwenden, aber ich denke, das würde den Code nur aufblähen, während Sie ohnehin schon Namen für Formulare verwenden müssen.