CODEWITHSUNDEEP
javascriptjquery
Kyle Schmelzer
Kyle Schmelzer

Reputation: 153

Using radio buttons to show content using Jquery

The purpose of this is to have text show in the placeholder div upon selecting the radio button. Problem is my Jquery coding is bad, and In don't know what I'm doing really.

html 

<div>
<form>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</form>
</div>

<div class="placeholder">
</div>

Jquery

$(document).ready(function(e) {

    $('.menu').click(function () {
        if ("#one").checked {
            $('.placeholder').html('<h3>Testing</h3>');
        }if ("#two").checked {
            $('.placeholder').html('<h3>Testing  Testing</h3>');
        }if ("#three").checked {
            $('.placeholder').html('<h3>Testing Testing Testing</h3>');
        }
    });

});

Note: if I check all three radio buttons at once, I am wanting all three messages to come up. I notice in JSfiddle, I can only click one radio button at a time. If I click another it unchecks the previous button. I am using similar code on the website im working on at the moment, and it allows me to check as many as I want. Reasoning for this?

Website Im working on using radio buttons - http://bitlamp.wctc.edu/~kschmelzer/js2/LLC/

I am trying to have have options be checked, through three different "pages" (note if the site doesn't load, the "pages" are merely divs being hidden/shown on the button press. It's all on one page) using the next button, then on the final fourth page, it shows content (the text) from the selected radio buttons.

Thank you for your help!

Upvotes: 0

Views: 179

Answers (7)

Mohammedshafeek C S
Mohammedshafeek C S

Reputation: 1943

It would be more easy if you are choosing check box instead of radio button.. I think the following code will results your output..Try it

<form id="group2">
<input id="1" class="menu" type="radio" value="first">Radio Button here
<input id="2" class="menu" type="radio" value="second">Another Radio button
<input id="3" class="menu" type="radio" value="third">Yet another radio button
</form>

<div class="placeholder">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    var marray = [];
    $('.menu').click(function () {      
        if ($("#1").is(":checked")){
            var found = jQuery.inArray('1', marray);
            if (found < 0)
            marray.push('1');
        }

        if ($("#2").is(":checked")){
            var found = jQuery.inArray('2', marray);
            if (found < 0)
            marray.push('2');
        }        

        if ($("#3").is(":checked")){
            var found = jQuery.inArray('3', marray);
            if (found < 0)
            marray.push('3');
        }

        var a = marray.sort().toString();
        switch(a)
        {
            case '1'     : $('.placeholder').html('<h3>Testing</h3>');
                           break;
            case '2'     : $('.placeholder').html('<h3>Testing  Testing</h3>');
                           break;
            case '3'     : $('.placeholder').html('<h3>Testing Testing Testing</h3>');
                           break;            
            case '1,2'   : $('.placeholder').html('<h3>Testing</h3><h3>Testing  Testing</h3>');
                           break;
            case '1,3'   : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing Testing</h3>');
                           break;
            case '2,3'   : $('.placeholder').html('<h3>Testing  Testing</h3><h3>Testing Testing Testing</h3>');
                           break;
            case '1,2,3' : $('.placeholder').html('<h3>Testing</h3><h3>Testing  Testing</h3><h3>Testing Testing Testing</h3>');
                           break;
            default      : $('.placeholder').html('');
                           break;                                                   

        }        
    });

});

function remitem(arr, value) {
    var b = '';
    for (b in arr) {
        if (arr[b] === value) {
            arr.splice(b, 1);
            break;
        }
    }
    return arr;
}
</script>

check the fiddle.. https://jsfiddle.net/rcvk9Ldw/

Upvotes: 0

sgromskiy
sgromskiy

Reputation: 300

First, to fix radio button behavior you have to put them all in one <FORM> tag with the same name.

Second, you probably don't need jQuery here at all. Just use CSS selector

input:checked ~ .message{display: block}

See my example here https://jsfiddle.net/sewy1w71/

Upvotes: 0

nizzik
nizzik

Reputation: 826

First of all radio buttons let user select ONE of a limited number of choices, if you would like to create a multi-select field you might want to use 

<input type="checkbox" />

Radio buttons are treated as group based on their name field, so you can make a workaround and use unique names for each of the options - but that's definitely an example of a bad practice.

As for the code 

if (one.checked) {
  $('.placeholder').html('<h3>Testing</h3>');
}
if ($("#two").prop('checked')) {
  $('.placeholder').html('<h3>Testing  Testing</h3>');
}
if ($("#three").is(':checked')) {
  $('.placeholder').html('<h3>Testing Testing Testing</h3>');
}

You can perform check if input is checked either using checked property or via jQuery is(:checked) or prop

You can find working version here: https://jsfiddle.net/pcor7khq/1/

Upvotes: 0

Arun Shinde
Arun Shinde

Reputation: 1185

Try this one

$(document).ready(function(e) {

  $('#one, #two, #three').change(function(event) {
    var value = $(this).val();
    if (value == 'first') {
      $('.placeholder').html('<h3>Testing</h3>');
    } else if (value == 'second') {
      $('.placeholder').html('<h3>Testing  Testing</h3>');
    } else if (value == 'third') {
      $('.placeholder').html('<h3>Testing Testing Testing</h3>');
    }
  })


});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <form>
      <input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
      <input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
      <input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
    </form>
  </div>

  <div class="placeholder">
  </div>
</body>

</html>

Upvotes: 0

J&#243;zsef Cserk&#243;
J&#243;zsef Cserk&#243;

Reputation: 299

This is my solution: 

$(document).ready(function(e) {

    $('.menu').click(function () {
      var text = '';
      switch( this.id ) {
        case 'one': text = 'Selected: one';
        break;
        case 'two': text = 'Selected: two';
        break;
        case 'three': text = 'Selected: three';
        break;
      }
      $( '.placeholder' ).html( text );
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
  <div>
    <input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
   </div>
  <div>
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
  </div>
  <div>
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
  </div>
</form>
</div>

<div class="placeholder">
</div>

Upvotes: 0

LazyDeveloper
LazyDeveloper

Reputation: 619

added the updated version of your code , check it 

    $('input:radio[name=option]').click(function () {
    $('.placeholder').html();
        if ($(this).val() == 'first') {
            $('.placeholder').html('<h3>Testing</h3>');
        }if ($(this).val() == 'second') {
            $('.placeholder').html('<h3>Testing  Testing</h3>');
        }if ($(this).val() == 'third') {
            $('.placeholder').html('<h3>Testing Testing Testing</h3>');
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</form>
</div>
<div class="placeholder">
</div>

Upvotes: 1

Daniel Costa
Daniel Costa

Reputation: 111

There's some sintax errors, see there: http://codepen.io/FuckingLunatic/pen/grvZyd

$('.menu').click(function () {
        if ($("#one").is(":checked")) {
            $('.placeholder').html('<h3>Testing</h3>');
        }if ($("#two").is(":checked")) {
            $('.placeholder').html('<h3>Testing  Testing</h3>');
        }if ($("#three").is(":checked")) {
            $('.placeholder').html('<h3>Testing Testing Testing</h3>');
        }
    });

Upvotes: 1

Related Questions