user3534166 user3534166 - 3 months ago 10
CSS Question

select group background color labels

I am building a dynamic form to order products and have styled the radio buttons. I haven't added all the CSS, but enough to see the issue I'm having. I have some javascript to add a class when the radio button is selected, however it's not working correctly. I would like it to work so when you select one of the options in group 1, the button turns green and stays green... then when you select the option in group 2, that button then turns green for the selected also.

I will be adding several options (radio groups) and need to update the javascript so that each group has a radio button selected that stays green, but I don't know much about javascript.

Maybe some type of array for each label?



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




Answer

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.

Comments