我正在构建一个动态表单来订购产品并设置了单选按钮的样式。我没有添加所有的CSS，但足以看到我遇到的问题。当选择单选按钮时，我有一些javascript来添加类，但是它无法正常工作。我希望它能够工作，所以当您选择组1中的一个选项时，按钮变为绿色并保持绿色...然后当您在组2中选择该选项时，该按钮将变为所选的绿色。
我将添加几个选项（广播组）并需要更新javascript，以便每个组都选择了一个保持绿色的单选按钮，但我对javascript知之甚少。
每个标签可能都有某种类型的数组吗？
$('label').click(function () {
$('label').removeClass('btn-primary3');
$(this).addClass('btn-primary3');
});
$('input:checked').parent().addClass('btn-primary3');li.button-list {width:100%; margin:0px 0px 35px -20px; list-style:none; font-size:16px !important; position:relative; text-align:center;}
.checked{display:none;}
input.noradio {visibility: hidden;margin-left:-10px; }
label.btn-primary2 {background-color:#333; border-color:#333;font-size:16px !important; color:#fff; padding:10px;}
label.btn-primary3 {background-color:#008902 !important; border-color:#008902 !important;font-size:16px !important;}
label.btn-primary2:hover {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary2:focus {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary3:hover {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary3:focus {background-color:#008902 !important; border-color:#008902 !important;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3 style="text-align:center;">First Radio Group</h3>
<ul class="btn-group" id="input_14_20">
<li class="gchoice_14_20_0 button-list" >
<label class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_20_0" id="label_14_20_0">
<input type="radio" name="input_20" class="noradio" id="choice_14_20_0" tabindex="1" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off" checked="checked" value="Standard Floor Plan (King-Size Bed)|49900">
<i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 1</label>
</li>
<li class="gchoice_14_20_1 button-list">
<label class="wbc-button button btn btn-primary btn-primary2">
<input type="radio" name="input_20" class="noradio" id="choice_14_20_1" tabindex="2" value="Twin Bed Floor Plan|49900" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off"><i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 2</label>
</li>
</ul>
<h3 style="text-align:center;">Second Radio Group</h3>
<ul class="btn-group2" id="input_14_24">
<li class="gchoice_14_24_0 button-list">
<label name="countertops" class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_24_0" id="label_14_24_0">
<input type="radio" name="input_24" class="noradio" id="choice_14_24_0" tabindex="3" autocomplete="off" onclick="changeImage(0) gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" checked="checked" value="Standard Countertops|0">
<i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 1</label>
</li>
<li class="gchoice_14_24_1 button-list">
<label name="countertops" class="wbc-button button btn btn-primary btn-primary2" for="choice_14_24_1" id="label_14_24_1">
<input type="radio" name="input_24" class="noradio" id="choice_14_24_1" tabindex="4" onclick="changeImage(1) gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" value="Fiber-Granite Countertops|1800" autocomplete="off"><i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 2</label>
</li>
</ul>
答案 0 :(得分：1)
Instead of getting all labels in your script and removing the btn-primary3 classs, you need to get only the labels that wrap radio buttons of the same name as the one that was clicked.
So to achieve that you firstly get the name of the input within the clicked label, by selecting the first (and in this case, only) child of type "input" of the clicked label, and getting its name into a temporary variable:
var inputName = $(this).children("input")[0].name;
The next step is to select the parents of all input elements matching that name. These will be the relevant labels, and then removing the class from only those:
$("input[name='" + inputName + "']").parent().removeClass('btn-primary3');
Put that into your existing script and you get the desired result:
$('label').click(function () {
var inputName = $(this).children("input")[0].name;
$("input[name='" + inputName + "']").parent().removeClass('btn-primary3');
$(this).addClass('btn-primary3');
});
$('input:checked').parent().addClass('btn-primary3');
function gf_apply_rules() { }
function changeImage() { }li.button-list {width:100%; margin:0px 0px 35px -20px; list-style:none; font-size:16px !important; position:relative; text-align:center;}
.checked{display:none;}
input.noradio {visibility: hidden;margin-left:-10px; }
label.btn-primary2 {background-color:#333; border-color:#333;font-size:16px !important; color:#fff; padding:10px;}
label.btn-primary3 {background-color:#008902 !important; border-color:#008902 !important;font-size:16px !important;}
label.btn-primary2:hover {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary2:focus {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary3:hover {background-color:#008902 !important; border-color:#008902 !important;}
label.btn-primary3:focus {background-color:#008902 !important; border-color:#008902 !important;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3 style="text-align:center;">First Radio Group</h3>
<ul class="btn-group" id="input_14_20">
<li class="gchoice_14_20_0 button-list" >
<label class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_20_0" id="label_14_20_0">
<input type="radio" name="input_20" class="noradio" id="choice_14_20_0" tabindex="1" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off" checked="checked" value="Standard Floor Plan (King-Size Bed)|49900">
<i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 1</label>
</li>
<li class="gchoice_14_20_1 button-list">
<label class="wbc-button button btn btn-primary btn-primary2">
<input type="radio" name="input_20" class="noradio" id="choice_14_20_1" tabindex="2" value="Twin Bed Floor Plan|49900" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off"><i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 2</label>
</li>
</ul>
<h3 style="text-align:center;">Second Radio Group</h3>
<ul class="btn-group2" id="input_14_24">
<li class="gchoice_14_24_0 button-list">
<label name="countertops" class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_24_0" id="label_14_24_0">
<input type="radio" name="input_24" class="noradio" id="choice_14_24_0" tabindex="3" autocomplete="off" onclick="changeImage(0); gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" checked="checked" value="Standard Countertops|0">
<i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 1</label>
</li>
<li class="gchoice_14_24_1 button-list">
<label name="countertops" class="wbc-button button btn btn-primary btn-primary2" for="choice_14_24_1" id="label_14_24_1">
<input type="radio" name="input_24" class="noradio" id="choice_14_24_1" tabindex="4" onclick="changeImage(1); gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" value="Fiber-Granite Countertops|1800" autocomplete="off"><i class="fa fa-check checked" style="margin-left:-15px;"></i> <i class="fa fa-times unchecked" style="margin-left:-15px;"></i> Option 2</label>
</li>
</ul>Note that I have added placeholder functions for "gf_apply_rules" and "changeImage", and corrected a missing semicolon syntax error in your onclick handlers to avoid errors in the snippet.