jquery / html add class on radio button check, else remove class if radio button not checked?

Question

I have two radio buttons, with the same name group 'select'

HTML:

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>


<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>

The options here are 'Yes' or 'No'

if a user checks one of the radio buttons then I want the parent div 'select_box_outer' to have a class added 'select_box_outer2' which basically changes the css of my div background colour the border and adds a shadow to the div 'select_box_outer'.

Then if the radio button is de-checked then it should remove the class and go back to the original css settings for 'select_box_outer'.

I also have 'checkbox_tick' displayed when a radio button is not checked, this appears as a greyed out tick. But If the radio button is checked then 'checkbox_tick' css should be display none and my div 'checkbox_tick2' should be displayed as block. But if the radio button is then de-checked then it should switch back to 'checkbox_tick'.

I am struggling to get to grips with what I would need to do here, please can someone show me where I am going wrong? Thanks in advance:

JQUERY:

<script>
jQuery(function(){
        jQuery("input[name=select]").change(function(){          


            if ($(this).val() === "Yes") {
            $(this).parents('div.select_box_outer').addClass( "select_box_outer2" );
$('div.checkbox_tick').css('display', 'none');
            }
            else {
            $(this).parents('div.select_box_outer').removeClass( "select_box_outer2" );
$('div.checkbox_tick2').css('display', 'block');
            }                                                            
       });
});
</script>

CSS:

.select_box_outer{
    width:150px;
    height:130px;
    border: 1px solid #999;
    background: #eee;
    box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-webkit-border-radius: 5px;
-moz-border-bradius: 5px;
border-radius: 5px;
cursor:pointer;
cursosr:hand;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
display:inline-block;
margin-right:50px;
}

.select_box_outer2 {
    background: #FFB631; /* Or some other color */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

.checkbox_tick{
 height:55px;
width:100%;
background-image: url('../images/tick.png');
background-repeat:no-repeat;
background-position: center;
background-size:35px 35px;
position:relative;
display:none;
margin:auto;

}

.checkbox_tick2{
 height:55px;
width:100%;
background-image: url('../images/tick.png');
background-repeat:no-repeat;
background-position: center;
background-size:35px 35px;
position:relative;
margin:auto;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

WHY IS YOUR TITLE SHOUTING AT ME??

Rory McCrossan
– Rory McCrossan

2015-02-06 10:50:57 +00:00
Commented Feb 6, 2015 at 10:50 — Rory McCrossan
– Rory McCrossan, Commented Feb 6, 2015 at 10:50

Rahul · Accepted Answer · 2015-02-06 13:46:53Z

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2" style="display:none;"></div>
</span>
</div>


<div class="select_box_outer">
    <span class="select_box">
        <input type="radio" id="select2" name="select" value="same">
        <div class="checkbox_tick"></div>
        <div class="checkbox_tick2" style="display:none;"></div>
    </span>
</div>

<script src="jquery-1.10.1.min.js"></script>

<script>
jQuery(function(){

    jQuery("input[name=select]").change(function(){          

        $('.select_box_outer').removeClass("select_box_outer2");
        $('.checkbox_tick').css('display', 'block');
        $('.checkbox_tick2').css('display', 'none');

        $(this).parents('div.select_box_outer').addClass( "select_box_outer2" );
        $(this).siblings('div.checkbox_tick').css('display', 'none');
        $(this).siblings('div.checkbox_tick2').css('display', 'block');

    });
});
</script>

<style>

.select_box_outer{
    width:150px;
    height:130px;
    border: 1px solid #999;
    background: #eee;
    box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
-webkit-border-radius: 5px;
-moz-border-bradius: 5px;
border-radius: 5px;
cursor:pointer;
cursosr:hand;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
display:inline-block;
margin-right:50px;
}

.select_box_outer2 {
    background: #FFB631; /* Or some other color */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

.checkbox_tick{
 height:55px;
width:100%;
background-image: url('../images/tick.png');
background-repeat:no-repeat;
background-position: center;
background-size:35px 35px;
position:relative;
display:none;
margin:auto;

}

.checkbox_tick2{
 height:55px;
width:100%;
background-image: url('../images/tick.png');
background-repeat:no-repeat;
background-position: center;
background-size:35px 35px;
position:relative;
margin:auto;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}    

</style>

thanks for this, this is almost bang on apart from when a user checks the radio button checkbox_tick2 is shown but if they de-check checkbox_tick2 should hide/display none and checkbox_tick should be shown.
Hello James, i have updated the jquery script code. Its working fine now. Please try it. and lets reply me.

Scoala · Accepted Answer · 2015-02-06 10:57:15Z

0

why not use something like this?

$(document).ready(function(){
    $("input.check").click(function(){
        if($(this).is(":checked")){
            $(this).parent().addClass("selectedclass");
        }
    });
});

just add an if and else statement and you should get what you need

answered Feb 6, 2015 at 10:57

Scoala

15011 bronze badges

3 Comments

James Daley Over a year ago

but I'm using radio buttons not checkbox? does this matter? or does it do the same thing whether checkbox or radio button? also where abouts between the tags would I add my else statement? sorry to ask but am really new to jquery

James Daley Over a year ago

thanks for your suggestion, I tried this but it's not doing anything?

James Daley Over a year ago

thanks for the example but that is not quite what I want. I need something that will simply add a class (i.e. change the background colour of a div) and then reset the div to the original background colour when it is not checked

Collectives™ on Stack Overflow

jquery / html add class on radio button check, else remove class if radio button not checked?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related