CODEWITHSUNDEEP
javascriptjquery
JasonDavis
JasonDavis

Reputation: 48933

Show or hide a table row based on a Radio button value

I have this simple jQuery code below that shows or hides a bunch of table rows depending on the value of 2 radio buttons.

The code below works great for the click event but I would also like to add in code that work when the page is loaded, before the click event ever happens it should show or hide my table rows based on the value of the radio button.

So when page loads, if the radio button for the "yes" value is selected it should show the tables, if no then it should hide them. IF no radio button is selected, it should also hide them.

Can someone help to add these additions?

$('input[type=\"radio\"]').click(function(){
    if($(this).attr('value')=='yes'){
        $('.showCta').show();
    }
    if($(this).attr('value')=='no'){
        $('.showCta').hide();
    }
});

Upvotes: 0

Views: 6560

Answers (5)

David Thomas
David Thomas

Reputation: 253318

While the answers posted so far work, I'd still advise further changes to condense your code a little (you're using jQuery, the slogan for which is: "write less, do more." Take advantage of that):

// You don't need to escape the quotes (unless you delimit the string with
// the same quotes you use within your string).
// bind event-handling to the 'change' event:
$('input[type="radio"]').change(function(){
    // because this should only execute according the condition of the
    // checked 'input' element:
    if (this.checked){
        // show, or hide, the element(s) according to the assessment evaluating
        // to true (show) or false (hide):
        $('.showCta').toggle(this.value === 'yes');
    }
// trigger the change event, and thus the change-event handling, on page-load:
}).change();

JS Fiddle demo.

References:

Upvotes: 1

J148
J148

Reputation: 576

Well you can do this:

HTML:

<input id='yes' type='radio' name='check' checked>Yes</input>
<input id='no' type='radio' name='check'>No</input>
<button id='button'>Button</button>

JS:

$(document).ready(function() {
    if (document.getElementById('yes').checked) {
        $('#button').show();
    } else {
        $('#button').hide();
    }
});

Upvotes: 1

Will
Will

Reputation: 1299

This should be a pretty simple fix since all the current code you have should still work. Try this:

The following handles the on page ready:

$(document).ready( function() {
  var $x = $('input[type=\"radio\"]');

  if($x.attr('value')=='yes'){
            $('.showCta').show();
  }
  if($x.attr('value')=='no'){
            $('.showCta').hide();
  }
});

And keep the event handler as well:

$('input[type=\"radio\"]').click(function(){
    if($(this).attr('value')=='yes'){
        $('.showCta').show();
    }
    if($(this).attr('value')=='no'){
        $('.showCta').hide();
    }
});

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Use .val() and change event. Also you don't need to escape quotes like \"

$('input[type="radio"]').change (function(){
    if($(this).val() =='yes'){
        $('.showCta').show();
    }
    if($(this).val() == 'no'){
        $('.showCta').hide();
    }
}).change(); //Trigger intially

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25882

You can extract the main logic in an function like bellow, This is because you won't repeat your code.

function showTablesByRadio(){
    if($(this).attr('value')=='yes'){
        $('.showCta').show();
    }
    if($(this).attr('value')=='no'){
        $('.showCta').hide();
    }
}

call That function on click of radio & for each radio on load.

$('input[type=\"radio\"]').click(showTablesByRadio);

$(document).ready(function(){
    $('input[type=\"radio\"]').each(showTablesByRadio);
})

Upvotes: 1

Related Questions