CODEWITHSUNDEEP
jqueryhtmlcssradio-button
James Daley
James Daley

Reputation: 289

jquery / html check radio button on div click and allow 1 div from each name group to be highlighted?

I have a form made up of radio buttons:

My first section of the form contains 2 radio buttons with the same name, i.e. select1, which means a user can either select one or the other but not both.

Then in the second section of my form I have another 2 radio buttons with another name i.e. select2.

I have my radio buttons css set to display none, and have wrapped my radio buttons in a span in order to style them.

The form looks like so:

HTML:

section1

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select1" 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="select1" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>

section2

<div class="select_box_outer">
<span class="select_box">
<input type="radio" id="select" name="select2" 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="select2" value="same">
<div class="checkbox_tick"></div>
<div class="checkbox_tick2"></div>
</span>
</div>

The options in these sections are 'Yes' or 'No'

I am using jquery so that when a user clicks on my parent DIV 'select_box_outer' this checks the child radio button and adds a class 'select_box_outer2' to my div 'select_box_outer', which essentially changes the background colour of the div as well as a couple of border changes etc.

The basic result here is that the div 'select_box_outer' changes from grey to orange when a user clicks it and the radio button in this div is checked using jquery to say when a user clicks on the div 'select_box_outer', check the child radio button.

So my user can essentially check a radio button by clicking on the parent div 'select_box_outer' and jquery simply checks the radio button within that div.

So now if the user selects the other radio button in the same name group by clicking on the other 'select_box_outer' div then the radio button becomes unchecked on the first div 'select_box_outer' and the background of the div 'select_box_outer' returns back to grey/not orange. Whilst checking the radio button in the other 'select_box_outer' div the user clicks on.

As well as this, within each of my divs 'select_box_outer' there is a tick. When the radio button for that div is unchecked then the tick shows as grey.

my div with the tick is called 'checkbox_tick'

But when a radio button is checked it is suppose to set the display of my 'checkbox_tick' to none and display my green tick 'checkbox_tick2'

I am having some difficulty firstly in getting 'checkbox_tick2' to display when a user checks a radio button in that div.

Also If I click on my next name group of radio buttons only one of my divs in the 'select_box_outer' class will be orange at any time, but it should allow for one 'select_box_outer' div to be orange for each name group?

JQUERY:

<script>
jQuery(function(){
    jQuery(".select_box_outer").click(function(){          

        $('input[type=radio]', this).prop("checked",true);

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

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

    });
});
</script>

Upvotes: 0

Views: 3422

Answers (2)

Ted
Ted

Reputation: 14927

Here check out this fiddle: Fiddle (I added the ticks with fontawesome for display purposes)

The biggest change was changing

$(this).siblings('div.checkbox_tick').css('display', 'block');
$(this).siblings('div.checkbox_tick2').css('display', 'none');

to

$(this).find('.checkbox_tick').css('display', 'block');
$(this).find('.checkbox_tick2').css('display', 'none');

Oh, and not putting divs in spans

Updated answer:

Updated Fiddle

Here's a way to confine the script to each section:

jQuery(function(){
    jQuery(".select_box_outer").click(function(){          

        $('input[type=radio]', this).prop("checked",true);

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

        $(this).addClass( "select_box_outer2" );
        $(this).find('.checkbox_tick').css('display', 'block');
        $(this).find('.checkbox_tick2').css('display', 'none');

    });
});

This is using .parent to scope the actions to the appropriate section.

Here's good stuff on traversing the dom tree: jQuery Docs: Tree Traversal

HTH, -Ted

Upvotes: 0

Lelio Faieta
Lelio Faieta

Reputation: 6684

If you want to select more than one element togheter you have to use classes and no id. Two elements with the same id are not allowed. Change id="select" to class="select" and adapt code accordingly.

Upvotes: 0

Related Questions