Question

我想确保＆＃34;电子邮件＆＃34;单选按钮是在负载而不是电话上检查的。

出于某种原因，＆＃34;电话＆＃34;单选按钮被检查，但两个输入都显示，我不太明白。

这是我的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

工作演示 http://jsfiddle.net/2F88K/ 或 http://jsfiddle.net/775X2/

变更事件的顺序
触发cahnge事件就可以了。

如果我可以建议：尝试将更改事件保留在外面。请参阅此radioInput.prop('checked', true).trigger("change");

radioInput.prop('checked', true)的使用是有趣的，我不鼓励。 :)认为单选按钮为either / or，即两个中的一个将被选中。

希望休息符合你的需要。 :)

<强>代码

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

有很多方法可以做到这一点......

解决方案＃1：（HTML）

您可以使用checked="checked"

<强> JSFiddle Demo

解决方案＃2：（JQuery）

var email = $("#email");

email.prop('checked', true);

要在页面加载时隐藏手机输入，您可以trigger change事件：

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

<强> JSFiddle Demo

Answer 3

首先input[value='email']不是一个好的选择器 - 而是使用#email。检查电话单选按钮的原因是您使用以下代码进行检查：

        radioInput.prop('checked', true);

你可能想写：

       emailRadio.prop('checked', true);

请记住，您无法同时检查phone和email！它们都具有相同的name。

Answer 4

试试这个

JS Fiddle

此处的关键是$('#email').prop('checked', true).trigger('change');

启用加载时检查单选按钮

4 个答案: