Ändern der Beschriftungsklasse für Optionsfeldgruppen

Unten ist ein Code-Snippet der Optionsfeldgruppe mit einer Bootstrap-Vorlage. Aber was ich versuche zu tun, ist, den Klassenanteil des Optionsfelds jedes Mal zu ändern, wenn die Option umgeschaltet wird (dh Radiobutton ist markiert, die Label-Klasse wäre 'btn btn-primary' und wenn die ungeprüfte Label-Klasse wäre 'btn btn- Standard'). Weiß jemand, wie man das erreicht?Ändern der Beschriftungsklasse für Optionsfeldgruppen

<body> 
    <div class = "form-group"> 
     <label class = "control-label col-md-3 col-sm-3 col-xs-12">Gender</label> 

     <div class = "col-md-6 col-sm-6 col-xs-12"> 
      <div id = "gender" class = "btn-group" data-toggle = "buttons"> 
       <label class = "btn btn-default" data-toggle-active-class = "btn-primary" data-toggle-passive-class = "btn-default"> 
        <input type = "radio" name = "gender" value = "male"> &nbsp; Male &nbsp; 
       </label> 

       <label class = "btn btn-primary" data-toggle-class = "btn-primary" data-toggle-passive-class = "btn-default"> 
        <input type = "radio" name = "gender" value = "female"> Female 
       </label> 
      </div> 
     </div> 
    </div> 
</body>

Quelle

2016-07-02 Zikaynam

Sie können etwas tun:

$('input:radio').change(function(){ 
     var $self = $(this); 
     if ($self.prop('checked')) { 
     $('input[type=radio]').parent().removeClass('btn-primary'); 
     $self.parent().addClass('btn-primary'); 
     } else { 
     $self.parent().removeClass('btn-default'); 
     } 
    });

Hier Geige Code arbeiten: https://jsfiddle.net/3r602pcg/

Quelle

2016-07-02 12:32:56

danke für die Antwort auf meine Frage, sorry es dauerte eine Weile für mich neu zu reagieren in diesem Web-Entwicklung Ding, so dass ich nicht früher reagieren konnte, weil ich Ihre Antwort überprüfen musste .... auf jeden Fall zurück zum Thema .. ... Ihr Vorschlag hat funktioniert, aber es hat einen Bug, wenn Sie bemerken, dass der Initial-Button die Grenze etwas verliert, denke ich, hätte er auf die Btn-Default-Klasse zurückkehren sollen ... irgendwelche Gedanken? – Zikaynam

Ich habe deinen Fehler herausgefunden und es hat fantastisch funktioniert ... Danke, dass du mich in die richtige Richtung gelenkt hast – Zikaynam

Sie können wie unten etwas tun:

$(function(){ 
    $(".checkbox-class").change(function() { 
    $("#gender").toggleClass("show-hide", this.checked) 
    }).change(); 
});

Oder alternativ können Sie addClass und removeClass Methode mit jQuery

Quelle

2016-07-02 12:06:29

Dank für die Antwort auf meine Frage, sorry es dauerte eine Weile für mich neu zu reagieren Bei diesem Webentwicklungsding konnte ich nicht früher antworten, weil ich deine Antwort überprüfen musste ... Wie auch immer, zurück zum Thema ..... habe deinen Vorschlag versucht, aber leider hat es nicht funktioniert, nichts passiert, wenn ich den Haken loslasse Optionsfeld – Zikaynam

Sie jquery dies leicht bewerkstelligen können, verwenden Sie diese bei Bottom versuchen

$('input[type=radio]').each(function(){ 
    if($(this).prop('checked')){ 
     $(this).removeClass('btn-default').addClass('btn-primary'); 
    }else{ 
     $(this).removeClass('btn-primary').addClass('btn-default'); 
    } 
});

Quelle

2016-07-02 12:07:09

danke für die antwort auf meine frage, sorry, es hat eine zeit gedauert, bis ich bei diesem web-entwicklungs-ding neu reagierte, so dass ich nicht früher antworten konnte, weil ich deine antwort überprüfen musste ... egal, zurück zum thema ... ..Ich habe versucht, was Sie vorgeschlagen und sogar ging weit in Bezug auf die Verwendung Ihres Codes, aber es war ein negatives, passiert nichts, auch nachdem ich das Optionsfeld deaktivieren. – Zikaynam

ist hier feste Antwort von Minal Chauhan

$('input:radio').change(function(){ 
     var $self = $(this); 
     if ($self.prop('checked')) { 
      $('input[type=radio]').parent().removeClass('btn-primary').addClass('btn-default'); 
      $self.parent().removeClass('btn-default').addClass('btn-primary'); 
     } 
    });

Quelle

2016-11-23 11:18:48

Ändern der Beschriftungsklasse für Optionsfeldgruppen

Antwort

Verwandte Themen