【问题标题】:Javascript if statement using :checked and .bind but only one option worksJavascript if 语句使用 :checked 和 .bind 但只有一个选项有效
【发布时间】:2014-01-20 16:15:59
【问题描述】:

我正在尝试创建一个覆盖按钮来禁用我正在构建的表单的自动完成功能,并希望使用 Javascript 让 div “manualOverrideWarning”在选择按钮时显示警告。问题是该功能仅在用户第一次按下按钮时起作用,但一旦关闭覆盖,该警告就不会消失。非常感谢我在代码中错误地使用 Javascript 的任何和所有指针!谢谢!

HTML:

    Manual Overide: 
            <label>No <input type="radio" 
name="manualOverride" id="manualOverrideNo" value="no" checked /></label>
            <label>Yes<input type="radio" 
name="manualOverride" id="manualOverrideYes" value="yes" /></label>

            <div id="manualOverrideWarning">test</div>

Javascript:

$('#manualOverrideYes, #manualOverrideNo').bind('change', function () {
    if($('input[name="manualOverrideYes"]:checked')) {
        $('#manualOverrideWarning').text('Autocomplete Disabled!');
    } else {
    if($$('#manualOverrideWarning').text(''));
    }
});

再次感谢大家!你们都是我的英雄!

【问题讨论】:

    标签: javascript jquery html if-statement radio


    【解决方案1】:

    您需要使用.is() 来针对选择器测试所选元素

    if($('input[name="manualOverrideYes"]').is(':checked')) {
    

    $('input[name="manualOverrideYes"]:checked') 返回一个 jQuery 包装器对象,它总是真实的。

    如果选中复选框,则 jQuery 包装器将包含 1 个元素,否则将包含 0 个元素,但仍将返回一个对象。

    另一种使用方法是测试返回对象的长度,如

    if($('input[name="manualOverrideYes"]:checked').length) {
    

    【讨论】:

    • 感谢您向我指出这一点。我试过你说的,但现在当我点击“是”时,它只输出“否”文本,当我再次点击“是”时不会改变。因此,无论我选择什么,似乎检查仍然显示“manualOverrideYes”按钮未选中。有什么想法吗?
    【解决方案2】:

    我会与is() 核对:

    if($('input[name="manualOverrideYes"]').is(':checked')) {
    

    或者,如果您喜欢原始版本,则需要检查 length 属性以查看是否实际返回了任何结果:

    if($('input[name="manualOverrideYes"]:checked').length)
    

    另外,您似乎在这里有一个错字:

    if($$('#manualOverrideWarning').text(''));
    

    我认为应该是

    if($('#manualOverrideWarning').text(''));
    

    【讨论】:

    • 感谢您向我指出这一点。我试过你说的,但现在当我点击“是”时,它只输出“否”文本,当我再次点击“是”时不会改变。因此,无论我选择什么,似乎检查仍然显示“manualOverrideYes”按钮未选中。有什么想法吗?
    • 我的错误我忘了指出我已经看到并修复了。同样的问题还在继续。但是感谢您的尝试!
    猜你喜欢
    • 2015-02-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多