Javascript 启用加载时选中的单选按钮

我想确保“Email”单选按钮在加载时被选中，而不是在手机上

出于某种原因，“电话”单选按钮在加载时被选中，但两个输入都显示出来，我不太明白这一点

这是我的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();
});

---

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

解决方案#1:（HTML）

您可以使用

checked=“checked”

解决方案#2：（JQuery）

要隐藏页面加载时的手机输入，您可以

触发
更改
事件：

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

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

解决方案#1:（HTML）

您可以使用
checked=“checked”



解决方案#2：（JQuery）

要隐藏页面加载时的手机输入，您可以
触发
更改
事件：

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

工作演示或


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

如果我可以推荐的话：试着把你的变革活动放在外面。参见此
radioInput.prop（'checked'，true）.trigger（“change”）

使用
radioInput.prop（'checked'，true）
有点有趣，我不鼓励这样做<代码>：）
认为单选按钮是
或
，即在一个点上选择两个按钮中的一个

希望休息能满足你的需要<代码>：）

代码

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

工作演示或


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

如果我可以推荐的话：试着把你的变革活动放在外面。参见此
radioInput.prop（'checked'，true）.trigger（“change”）

使用
radioInput.prop（'checked'，true）
有点有趣，我不鼓励这样做<代码>：）
认为单选按钮是
或
，即在一个点上选择两个按钮中的一个

希望休息能满足你的需要<代码>：）

代码

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

首先，
input[value='email']
不是一个很好的选择——使用
#email
。手机单选按钮被选中的原因是您正在使用以下代码进行检查：

        radioInput.prop('checked', true);

你可能想写：

       emailRadio.prop('checked', true);

请记住，您不能同时检查
电话
和
电子邮件
！它们都有相同的
名称
首先
输入[value='email']
不是一个很好的选择器--使用
#email
。手机单选按钮被选中的原因是您正在使用以下代码进行检查：

        radioInput.prop('checked', true);

你可能想写：

       emailRadio.prop('checked', true);

请记住，您不能同时检查
电话
和
电子邮件
！它们都有相同的
名称
试试这个


这里的关键是
$（'#email'）。prop（'checked'，true）。trigger（'change'）
试试这个


这里的关键是
$（'#email'）。prop（'checked'，true）。trigger（'change'）
为什么要用JS做这些。为此，html无线电输入元素具有selected=“selected”属性。请看^^^是否应该检查它
checked=“checked”
，如果是，请纠正我wrong@haxxxton真的！我尝试添加checked=“checked”，但没有成功？不知道为什么：-（@imbondbaby您完全正确，先生，我的JSFIDLE已经检查过了..这只是一个注释。为什么要对JS执行此操作。html无线电输入元素具有selected=“selected”属性用于此目的。请参见^^^^^它不应该是
checked=“checked”
，如果我是，请更正我wrong@haxxxton太对了！我试着加了支票=“选中”但它不起作用？不知道为什么：-（@imbondbbaby您完全正确，先生，我的JSFIDLE已选中..所以只是一条评论，您的HTML演示程序起作用了，但jQuery没有。确定电子邮件选项被选中，但没有隐藏电话输入。感谢您提供的信息！您必须删除
radioInput.prop（'checked'，true）
因为两者都有相同的名称，所以必须使用
email.prop（'checked'，true）。trigger（'change'）；
在函数中解决此问题：）为您更新了答案！您的HTML演示正常，但jQuery不正常。请确保选择了电子邮件选项，但没有隐藏电话输入。感谢您提供的信息！您必须删除
radioInput.prop（'checked'，true）；
才能正常工作，因为两者的名称相同。您必须使用
Email.prop（'checked'，true.）。触发器（'change'））；
在修复此问题的函数中：）为您更新了答案！不幸的是，电话选项被选择为联机。我需要电子邮件选项-谢谢您的回答！此答案的更新完成了OP的要求：）@khakiout Thank you-将尝试一下！不幸的是，电话选项被选择为联机。我需要电子邮件选项-谢谢您的回答！更新这个答案完成了OP的要求：）@khakiout谢谢-将尝试一下！