Überprüfen Sie den Status der Schaltflächen-Kontrollkästchen

Ich möchte ein Kontrollkästchen, das wie eine Schaltfläche aussieht: Wenn es aktiviert ist, sieht die Schaltfläche gedrückt aus; Wenn es nicht markiert ist, sieht die Schaltfläche nicht gedrückt aus.Überprüfen Sie den Status der Schaltflächen-Kontrollkästchen

Als Bootstrap benutze ich natürlich data-toggle="buttons-checkbox". Aber es scheint nicht sehr praktisch zu sein, den Status der Checkbox zu überprüfen. Beispielsweise scheint .prop('checked') in dem folgenden Code nicht zu funktionieren.

$('#input-checkbox').click(function() { 
 
    if ($("#input-checkbox").prop('checked')) { 
 
     alert("yes"); 
 
    } else { 
 
     alert("no"); 
 
    } 
 
    });

<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
 
    <button type="button" class="btn btn-default active" id="input-checkbox">INPUT</button> 
 
    </div> 
 
</body>

Weiß jemand, was da los?

Quelle

2016-12-24 Anonymous

Fügen Sie value Attribut zu Ihrer Schaltfläche hinzu. Ich änderte btn-default zu btn-primary und fügte einen normalen Knopf auf der Seite hinzu, um den Unterschied zu erklären.

$('#input-checkbox').click(function() { 
 
    if ($("#input-checkbox").attr('value')=="checked"){ 
 
     $("#input-checkbox").attr('value','notchecked'); 
 
     $("#input-checkbox").removeClass('active'); 
 
    } 
 
    else { 
 
     $("#input-checkbox").attr('value','checked'); 
 
     $("#input-checkbox").addClass('active'); 
 
    } 
 
    });

.btn:focus,.btn:active { 
 
    outline: none !important; 
 
}

<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
 
    <button type="button" class="btn btn-primary active" value="checked" id="input-checkbox">INPUT</button> 
 
    <button type="button" class="btn btn-primary"> NPUT</button> 
 
    </div> 
 
</body>

Quelle

2016-12-24 04:46:52 ab29007

@Thomas Hat es Ihr Problem lösen? Wenn ja, kannst du bitte eine Antwort akzeptieren. – ab29007

Es funktioniert ... Aber ich bin ziemlich überrascht, dass wir ein selbstdefiniertes Attribut "Wert" für ein "Kontrollkästchen" hinzufügen müssen. –

Nun, wir könnten es auch mit anderen Methoden arbeiten lassen. Aber das Umschalten von Klassen ist nicht gut, wenn wir einen Zustand halten müssen, während andere Funktionen oder Ereignisse stattfinden. kannst du bitte die antwort dann annehmen. – ab29007

Überprüfen Sie den Status der Schaltflächen-Kontrollkästchen

Antwort

Verwandte Themen