根据单选按钮值显示或隐藏表格行

Question

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();
    }
});

Answer 1

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);
})

Answer 2

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

Answer 3

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();
    }
});

Answer 4

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();
    }
});

Answer 5

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:

• change() .
• toggle() .