Enable Radio Button Checked On Load

Question

I'm wanting to ensure the "Email" radio button is checked on load rather than the phone.

For some reason the "Phone" radio button is checked onload yet both inputs are showing, I don't quite understand that.

DEMO HERE

Here is my jQuery

var ebuForm = {

        init : function() {
            ebuForm.showInput();
        },

        showInput : function(e) {

            var radioInput = $("input[type='radio']"),
                emailRadio = $("input[value='email']");

            radioInput.prop('checked', true);

            radioInput.change(function(){

                var emailInput = $('.email-input'),
                    phoneInput = $('.phone-input');

                if($(this).val()=="email") {
                    emailInput.show();
                    phoneInput.hide();
                    console.log('Email Enabled');
                } else {
                    emailInput.hide();
                    phoneInput.show();
                    console.log('Phone Enabled');
                }

            });

        }

};
$(function() {
    ebuForm.init();
});

Answer 1

Working demo http://jsfiddle.net/2F88K/ or http://jsfiddle.net/775X2/

• Order of the change event
• triggering the cahnge event will do the trick.

If I may recommend: Try keeping your change event outside. see this radioInput.prop('checked', true).trigger("change");

The use of radioInput.prop('checked', true) is kind of interesting which I wont encourage. :) think that radio buttons are either / or ie one of the 2 will be selected at one point.

Hope rest fits your need. :)

Code

var ebuForm = {

        init : function() {
            ebuForm.showInput();
        },

        showInput : function(e) {

            var radioInput = $("input[type='radio']"),
                emailRadio = $("input[value='email']");

            radioInput.change(function(){

                var emailInput = $('.email-input'),
                    phoneInput = $('.phone-input');

                if($(this).val() =="email") {
                    emailInput.show();
                    phoneInput.hide();
                    console.log('Email Enabled');
                } else {
                    emailInput.hide();
                    phoneInput.show();
                    console.log('Phone Enabled');
                }

            });
            radioInput.prop('checked', true).trigger("change");
        }

};
$(function() {
    ebuForm.init();
});

Answer 2

Many ways to do this...

Solution #1: (HTML)

You could use checked="checked"

JSFiddle Demo

Solution #2: (JQuery)

var email = $("#email");

email.prop('checked', true);

And to hide the phone input on page load, you can trigger the change event:

email.prop('checked', true).trigger('change');

JSFiddle Demo

Answer 3

First input[value='email'] is not such a good selector -- use #email instead. The reason the phone radio button is checked is because you are checking it with the code:

        radioInput.prop('checked', true);

Your probably wanted to write:

       emailRadio.prop('checked', true);

And remember you cannot check both phone and email ! They both have the same name .

Answer 4

Try this

JS Fiddle

The key here is $('#email').prop('checked', true).trigger('change');