Ich habe ein Kontrollkästchen Ja und Nein, daher möchte ich, dass der Benutzer nur eines verwenden kann. Wenn der Benutzer Ja ankreuzt, wird Nein gelöscht, wenn Ja, dann wird Nein gelöscht

    <input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" style="margin:1em 1em 5px 5px" @(ViewBag.Status == "Yes" ? " checked" : "")/>Yes

    <input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" style="margin:1em 1em 5px 5px" @(ViewBag.Status == "No" ? " checked" : "")/>No

<script>

     function selectOnlyThis(id) {
                for (var i = 0; i <= 4; i++) {
                    document.getElementById("Check" + i).checked = false;
                }
                document.getElementById(id).checked = true;
            }

</script>
1
Supermode 3 Dez. 2013 im 04:04

3 Antworten

Beste Antwort

Das Problem ist, dass Sie versuchen, auf nicht vorhandene Elemente zuzugreifen

Ihre Schleife geht von 0 bis 4, aber Ihre Elemente sind Check1 und Check2

Wenn also versucht wird, die Eigenschaft checked von Check0 (, die nicht existiert ) festzulegen, wird ein Fehler ausgegeben und die Ausführung gestoppt.

Verwenden

function selectOnlyThis(id) {
    console.log(id);
    for (var i = 0; i <= 4; i++) {
        var element = document.getElementById("Check" + i); // get element
        if (element){ // if element was found only the set its checked property
            document.getElementById("Check" + i).checked = false;
        }
    }
    document.getElementById(id).checked = true;
}

Demo unter http://jsfiddle.net/gaby/RHUVf/


Oder wenn Ihr Beispiel-HTML das tatsächliche ist, können Sie einfach Ihre Schleife ändern

for (var i = 1; i <= 2; i++) {
1
Gabriele Petrioli 3 Dez. 2013 im 00:18

Wie von anderen erwähnt, beschreiben Sie das Verhalten eines Optionsfelds. Es ist jedoch auch möglich, ein Kontrollkästchen so zu verhalten.

jsFiddle-Demo

$('input:checkbox').click(function(){
    $('input:checkbox').not($(this)).prop('checked',false);
});

Der obige Code bewirkt Folgendes:

  • $('input:checkbox') - Aktiviert das Kontrollkästchen Alle Eingabeelemente vom Typ

  • .not($(this)) - außer diesem

  • .prop('checked',false) - Deaktiviert das Kontrollkästchen

Dieser Code verwendet die JQuery-Javascript-Bibliothek. Sie müssen daher auf diese Bibliothek verweisen (normalerweise in den Head-Tags des Dokuments).

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
0
cssyphus 3 Dez. 2013 im 00:10

Es wäre viel hilfreicher / einfacher, HTML5 für diesen Teil zu verwenden. Wenn Sie HTML5 wählen, funktioniert der folgende Code, aber wenn Sie sich entscheiden, ihn nicht zu verwenden, hilft er nicht.

<input type="checkbox" name="<name>" value="<value"><*explanation*><br/><br/> 
            </form>
        </div>
    </div>
</body>
0
user3053675 3 Dez. 2013 im 00:11