bestimmen, welches Optionsfeld ausgewählt ist - benutzerdefiniertes Optionsfeld Markup

Question

Ich versuche zu bestimmen, welches Optionsfeld in einer Optionsfeldgruppe ausgewählt ist, wenn diese Gruppe angeklickt wird. Mein Markup und CSS ist für diese spezielle Optionsschaltfläche maßgeschneidert und ich denke, dass es Probleme mit meinem Klickereignis geben könnte. Ich habe eine bedingte Logik in Javascript, wo beide Warnungen beim Klicken angezeigt werden. Jeder hat eine Idee, wie man das korrigieren kann?

Hier ist eine Fiddle der Ausgabe.

Markup

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="toggle" id="family-radio-btn"> 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
     <span class="toggle-selection"></span> 
     </div> 
    </div> 
    </div> 
</div> 

JS

$('#family-radio-btn').click(function() { 
    if ($('#family-yes:checked').length) { 
     alert("yes"); 
    } 
    else 
    { 
     alert("no"); 
    } 
}); 

CSS

.toggle { 
    position: relative; 
    height: 34px; 
    width: 100%; 
    margin: 0; 
    background: #ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 3px; 
} 
.toggle .toggle-input { 
    display: none; 
} 
.toggle .toggle-input:checked + .toggle-label { 
    color: #ffffff; 
} 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
    left: 49%; 
} 
.toggle .toggle-label { 
    position: relative; 
    z-index: 2; 
    float: left; 
    width: 50%; 
    line-height: 32px; 
    color: #555555; 
    text-align: center; 
    font-weight: normal; 
    cursor: pointer; 
} 
.toggle .toggle-label.toggle-label-off { 
    padding-left: 2px; 
} 
.toggle .toggle-label.toggle-label-on { 
    padding-right: 2px; 
} 
.toggle .toggle-selection { 
    position: absolute; 
    z-index: 1; 
    top: 2px; 
    left: 2px; 
    display: block; 
    width: 50%; 
    height: 28px; 
    border-radius: 3px; 
    background-color: #0071bc; 
    -webkit-transition: left 0.15s ease-out; 
    -moz-transition: left 0.15s ease-out; 
    -ms-transition: left 0.15s ease-out; 
    -o-transition: left 0.15s ease-out; 
    transition: left 0.15s ease-out; 
} 

Answer 1

$('input[type="radio"]').click(function (e) { 
 
     if ($('#family-yes:checked').length) { 
 
      console.log("yes"); 
 
     } 
 
     else 
 
     { 
 
      console.log("no"); 
 
     } 
 
     
 
    });

.toggle { 
 
    position: relative; 
 
    height: 34px; 
 
    width: 100%; 
 
    margin: 0; 
 
    background: #ffffff; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 3px; 
 
} 
 
.toggle .toggle-input { 
 
    display: none; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label { 
 
    color: #ffffff; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
 
    left: 49%; 
 
} 
 
.toggle .toggle-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #555555; 
 
    text-align: center; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
} 
 
.toggle .toggle-label.toggle-label-off { 
 
    padding-left: 2px; 
 
} 
 
.toggle .toggle-label.toggle-label-on { 
 
    padding-right: 2px; 
 
} 
 
.toggle .toggle-selection { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 2px; 
 
    left: 2px; 
 
    display: block; 
 
    width: 50%; 
 
    height: 28px; 
 
    border-radius: 3px; 
 
    background-color: #0071bc; 
 
    -webkit-transition: left 0.15s ease-out; 
 
    -moz-transition: left 0.15s ease-out; 
 
    -ms-transition: left 0.15s ease-out; 
 
    -o-transition: left 0.15s ease-out; 
 
    transition: left 0.15s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="toggle" id="family-radio-btn"> 
 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
 
     <span class="toggle-selection"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Versuchen zu verwenden ist Funktion:

$('#family-radio-btn').click(function() { 
    if ($('#family-yes').is(":checked")) { 
     alert("yes"); 
    } 
    else 
    { 
     alert("no"); 
    } 

});

Answer 3

Sie verwenden Click-Ereignis auf die Eltern div, die sowohl Optionsfeld enthalten ja und nein. Wenn Sie also auf eine Schaltfläche klicken, wird das Klickereignis zwei Mal für Label und eins für Eingabe ausgelöst.

So müssen Sie Click-Ereignis nur auf Eingabe-Radio binden.

Versuchen Sie folgendes:

$(function(){ 
 

 
    $('.toggle-input').click(function() { 
 
     // e.preventDefault(); 
 
     if ($('#family-yes').is(":checked")) { 
 
      alert("yes"); 
 
     } 
 
     else 
 
     { 
 
      alert("no"); 
 
     } 
 
    }); 
 
});

.toggle { 
 
    position: relative; 
 
    height: 34px; 
 
    width: 100%; 
 
    margin: 0; 
 
    background: #ffffff; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 3px; 
 
} 
 
.toggle .toggle-input { 
 
    display: none; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label { 
 
    color: #ffffff; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
 
    left: 49%; 
 
} 
 
.toggle .toggle-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #555555; 
 
    text-align: center; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
} 
 
.toggle .toggle-label.toggle-label-off { 
 
    padding-left: 2px; 
 
} 
 
.toggle .toggle-label.toggle-label-on { 
 
    padding-right: 2px; 
 
} 
 
.toggle .toggle-selection { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 2px; 
 
    left: 2px; 
 
    display: block; 
 
    width: 50%; 
 
    height: 28px; 
 
    border-radius: 3px; 
 
    background-color: #0071bc; 
 
    -webkit-transition: left 0.15s ease-out; 
 
    -moz-transition: left 0.15s ease-out; 
 
    -ms-transition: left 0.15s ease-out; 
 
    -o-transition: left 0.15s ease-out; 
 
    transition: left 0.15s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="toggle" id="family-radio-btn"> 
 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
 
     <span class="toggle-selection"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Sie Probleme haben mit Ereignis sprudeln. Wenn Sie auf ein Label klicken, werden zwei Klicks generiert: eins auf dem Label und ein weiteres auf dem Input.

Ich würde Ihnen vorschlagen, den Radio-Button, klicken Sie diese Änderung in Ihrem Javascript zu handhaben:

$('input[name="family"]').click(function() { 
    if($(this).attr('checked')) { 
    console.log('yes'); 
    } else { 
    console.log('no'); 
    } 
}); 

wünschen u Glück