Versuch, JavaScript zu verwenden, um eine eindeutige Klasse hinzuzufügen, wenn Optionsfeld aktiviert ist

Question

Ich versuche, Javascript zu verwenden, um die Hintergrundfarbe des Radio-Labels zu ändern, wenn es aktiviert ist. Jedes Optionsfeld wendet eine andere Klasse oder Farbe an. Ich muss Java wegen eines CSS-Konflikts mit einem Plugin verwenden. Außerdem benötigen Sie das Radiowertfeld für dynamische Zwecke, daher kann dieses Feld nicht zum Hinzufügen von Klassen verwendet werden.

Hier, wo ich bin an:

$(window).load(function() { 
 
    $('#emailGroup1').change(function() { 
 
    if (this.checked) { 
 
     $(this).parent().addClass('Good'); 
 
    } else { 
 
     $(this).parent().removeClass('Good'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked> 
 
     Pending 
 
    </label> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup2" value="Good"> 
 
     Good 
 
    </label> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad"> 
 
     Bad 
 
    </label> 
 
    </form> 
 
</div>

Ich mag würde das Javascript haben lesen Sie die standardmäßig aktiviert Optionsfeld und gelten diese Klasse, wenn Seite geladen wird. Wenn der Benutzer dann eine andere Optionsschaltfläche auswählt, wird die Klasse aus der Standardauswahl entfernt und auf die Auswahl angewendet.

Answer 1

Sie auf Radio-Buttons keine Etiketten hören sollte, und ich sah, dass Sie eine nicht eindeutige ID Etikett sind einstellen, dass es falsch ist, sollte das HTML-Tag-ID einen eindeutigen Wert haben.

$(window).load(function() { 
 
    $('input[name=emailConfirm]').change(function() { 
 
    $('.emailGroup').removeClass('Good') 
 
    $(this).parent().addClass('Good'); 
 
    }); 
 
});

.Good { 
 
    background: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label class="emailGroup Good"> 
 
    <input type="radio" name="emailConfirm" value="Pending" checked> 
 
    Pending</label> 
 
    <label class="emailGroup"> 
 
    <input type="radio" name="emailConfirm" value="Good"> 
 
    Good</label> 
 
    <label class="emailGroup"> 
 
    <input type="radio" name="emailConfirm" value="Bad"> 
 
    Bad</label> 
 
    </form> 
 
</div>

Answer 2

Versuchen Sie, diese

$('.emailGroup input').change(function() { 
 
    if (this.checked) { 
 
     $(this).parent().parent().addClass('Good'); 
 
    } else { 
 
     $(this).parent().parent().removeClass('Good'); 
 
    } 
 
    });

#confirmGroup{ 
 
    color: red; 
 
} 
 
.Good { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" value="Pending" > 
 
     Pending 
 
    </label> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" value="Good"> 
 
     Good 
 
    </label> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" value="Bad"> 
 
     Bad 
 
    </label> 
 
    </form> 
 
</div>

Answer 3

$('input[type=radio]') Selektor Ereignisse an alle Funkeingänge zu binden. Und Verwenden Sie .trigger() Methode, Radioeingaben Ereignis beim Laden der Seite zu rufen.

$(window).load(function() { 
 
    $('input[type=radio]').change(function() { 
 
    if ($(this).is(':checked')) { 
 
     $(this).parent().addClass('Good'); 
 
    } else { 
 
     $(this).parent().removeClass('Good'); 
 
    } 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked> 
 
     Pending 
 
    </label> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup2" value="Good"> 
 
     Good 
 
    </label> 
 
    <label id="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad"> 
 
     Bad 
 
    </label> 
 
    </form> 
 
</div>

Answer 4

Ihr Problem ist aufgrund Ihrer doppelte Verwendung von id Attribute, die ungültig ist. Sie können stattdessen allgemeine class Attribute verwenden, um Ihre Elemente zu targetieren, und dann die Klasse good nach Bedarf anwenden. Versuchen Sie folgendes:

$('.email').change(function() { 
 
    $('.emailGroup.good').removeClass('good'); 
 
    $(this).closest('.emailGroup').addClass('good'); 
 
});

.good { background-color: #0D0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email"> 
 
     Pending 
 
    </label> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email"> 
 
     Good 
 
    </label> 
 
    <label class="emailGroup"> 
 
     <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email"> 
 
     Bad 
 
    </label> 
 
    </form> 
 
</div>

Beachten Sie auch, dass diese CSS erreicht werden kann, indem allein durch eine geringfügige Änderung Ihrer HTML:

.email:checked + label { 
 
    background-color: #0C0; 
 
}

<div id="confirmGroup"> 
 
    <form> 
 
    <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email"> 
 
    <label class="emailGroup" for="emailGroup1"> 
 
     Pending 
 
    </label> 
 

 
    <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email"> 
 
    <label class="emailGroup" for="emailGroup2"> 
 
     Good 
 
    </label> 
 

 
    <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email"> 
 
    <label class="emailGroup" for="emailGroup3"> 
 
     Bad 
 
    </label> 
 
    </form> 
 
</div>

Answer 5

$(window).load(function() { 
 
    $("input[type=radio]:checked").parent().css('background','yellow'); 
 
    $('input[name=emailConfirm]').change(function() { 
 
    $('.emailGroup').css('background','none'); 
 
    if($(this).val() == "Good"){ 
 
     $(this).parent().css('background','green'); 
 
    } 
 
    if($(this).val() == "Bad"){ 
 
     $(this).parent().css('background','red'); 
 
    } 
 
    if($(this).val() == "Pending"){ 
 
     $(this).parent().css('background','yellow'); 
 
    } 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="confirmGroup"> 
 
    <form> 
 
    <label class="emailGroup"> 
 
    <input type="radio" name="emailConfirm" value="Pending" checked> 
 
    Pending</label> 
 
    <label class="emailGroup"> 
 
    <input type="radio" name="emailConfirm" value="Good"> 
 
    Good</label> 
 
    <label class="emailGroup"> 
 
    <input type="radio" name="emailConfirm" value="Bad"> 
 
    Bad</label> 
 
    </form> 
 
</div>