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.

-1
mmarcc 18 Aug. 2015 im 19:04

2 Antworten

Beste Antwort

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

Bootply-Beispiel

Entfernen Sie auch diese Inline-Ereignishandler.

3
j08691 18 Aug. 2015 im 16:15

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.

0
Community 23 Mai 2017 im 12:13