Question

I’m new at both JS and jQuery (behind the times I know) but I have a working JS function that is very simple that I’d like to convert to jQuery. I think if I can get help with this it will help me in understanding the mechanics of jQuery (as I understand this JS).

What this does is to show or hide a div based on whether a pair of radio buttons are selected Yes or no. What I’d like to do (on load) is slide the div in if Yes is selected and out if No is selected. I’d like no to be default (right now Yes is default). I do have jQueryUI running for the slide.

Here is the JS code:

<script type="text/javascript">
function makeChoice()
{
    if (document.form1.mobileyesno[1].checked == true)
        {
            document.getElementById('wanttexts').style.visibility = 'hidden'; 
        }
    else
        {
            document.getElementById('wanttexts').style.visibility = 'visible';          
        }
}

</script>

I know this is probably elementary but I need the help. 🙂 Thanks!

Answer 1

$(function() {
    if ($('input[name="mobileyesno"]:checked').val() == 'Yes') {
      $('#wanttexts').show();
    } else {
      $('#wanttexts').hide();
    }
);

The outer $(function() { }); means that the code in the curly brackets will run when the page has finished loading. $('input[name="mobileyesno"]:checked') is a way of selecting all input fields which have the name “mobileyesno” and are currently checked, and val() extracts the value of that input field. If you want a particular input field to be selected by default when the page loads, add the checked="checked" attribute to the input tag for that radio button.