试图使用JavaScript来添加独特的类时，单选按钮，检查

Question

我试图使用JavaScript来改变无线标签的背景颜色，当它被选中。每个单选按钮将应用不同的类或颜色。我需要使用java，因为与插件的css冲突。还需要无线电值域用于动态目的，所以不能使用该域来添加类。

下面是我在哪里：

$(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>

我想有JavaScript的读取默认选中的单选按钮并应用类加载页面时。然后，当用户选择不同的单选按钮时，类将从默认值中删除并应用于选择。

Answer 1

你应该听单选按钮没有标签，我看到你设置一个不唯一的ID标签的，它是错的，HTML标签的ID应该有一个独特的价值。

$(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

试试这个

$('.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]')选择将事件绑定到所有无线输入。并使用.trigger()方法调用无线电输入在页面加载change事件。

$(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

你的问题是由于您的重复使用id属性，这是无效的。您可以改用普通class属性来定位元素，然后根据需要应用good类。试试这个：

$('.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>

另外请注意，这可以单独使用CSS你的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>