Jquery - finding values of radio buttons and changing the css of another element

Question

I have a radio button group

<input type="radio" name="Q1" value="Yes />
<input type="radio" name="Q1" value="No />

I also have 2 divs

<div id="Q4" style="display:none"> Some content</div>
<div id="Q5" style="display:none"> Some content</div>

This is what I would like to do using Jquery

If someone clicks radio button with value Yes - set div id=Q4 to display:block. If someone clicks radio button with value No - set div id=Q4 to display:none and set div id=Q5 display:block

I have been trying and not very successful. I have used alerts in the jQuery to try and understand what I am doing wrong. Can anyone please help

$('input[type="radio"]').click(function(){
var userClick= $('input:radio[name=Q1]:checked').val();
switch(userClick){
  case 'Yes':
alert('Number1');
   case 'No':
     alert('Number2');    
  }
});

<input type="radio" name="Q1" value="Yes /> The double quote at the end of the value tag is missing? — Stefan Brendle
– Stefan Brendle, Commented Apr 23, 2013 at 20:15
Will you be using this for multiple radio button/div groups or just this one? — j08691
– j08691, Commented Apr 23, 2013 at 20:18

tymeJV · Accepted Answer · 2013-04-23 20:15:12Z

1

You can do

$('input[type="radio"]').change(function(){
    var value = this.value;

    if (value === "Yes") {
        $("#Q4").css("display", "block");
        $("#Q5").css("display", "none");
    }
    else {
        $("#Q5").css("display", "block");
        $("#Q4").css("display", "none");
    }
});

Here's a nice working demo: http://jsfiddle.net/byvvx/

answered Apr 23, 2013 at 20:15

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nirm Over a year ago

Excellent - thanks. I did manage to do it using switch but yours in also very neat. jsfiddle.net/nirmminator/Pe9Nm/43

Raman · Accepted Answer · 2013-04-23 20:18:07Z

0

You can use the change event handler on the radio buttons using the name property of the checkboxes and handle the display. Something like this:

$("input[@name='Q1']").change(function(){
    var selected = this.value;

    if (selected === "Yes") {
        $("#Q5").css("display", "none");
        $("#Q4").css("display", "block");            
    }
    else {
        $("#Q4").css("display", "none");
        $("#Q5").css("display", "block");   
    }
});

And also double quotes at the end of value are missing in checkboxes. Hope this is just a ty[o in the questions only. otherwise please correct that also.

answered Apr 23, 2013 at 20:18

Raman

1,37610 silver badges13 bronze badges

Comments

c0deNinja · Accepted Answer · 2013-04-23 20:21:18Z

0

Hey you can use jQuery's show() and hide() methods to show your divs.

Try something like this:

$(document).ready(function() {
    $('input[type="radio"]').click(function(){
        var userClick= $('input:radio[name=Q1]:checked').val();

        if(userClick === "Yes") {
            $("#Q4").show();
            $("#Q5").hide();
        } else if(userClick === "No") {
            $("#Q5").show();
            $("#Q4").hide();
        }
    });
});

answered Apr 23, 2013 at 20:21

c0deNinja

3,9842 gold badges31 silver badges46 bronze badges

Comments

j08691 · Accepted Answer · 2013-04-23 20:23:41Z

0

Here's a simple way to do what you're describing:

$('input[name=Q1]').click(function () {
    $('#Q4,#Q5').hide();
    if ($(this).val() == "Yes") $('#Q4').show();
    if ($(this).val() == "No") $('#Q5').show();
});

jsFiddle example

answered Apr 23, 2013 at 20:23

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

Jquery - finding values of radio buttons and changing the css of another element

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related