此代码有什么问题？ .checked可能是我没有正确使用的那个

Question

I have a simple html form. 我有一个简单的HTML表单。 its a trouble logging in page, two radio buttons, one for forgot password, and another for forgot username. 这是登录页面时遇到的麻烦，两个单选按钮，一个忘记密码，另一个忘记用户名。 When user click one of the radio buttons, a small form appears below the option and then he can proceed further. 当用户单击一个单选按钮时，该选项下方会出现一个小表格，然后他可以继续进行操作。 I have just written the username part. 我刚刚写了用户名部分。 and have written a small function for it, but its not really working properly, in fact, its not working at all. 并为此编写了一个小函数，但实际上并不能完全正常工作。

I have checked the jquery selector, the form #usernamedrop does hide, but the if statement is not working properly. 我已经检查了jquery选择器，＃usernamedrop的形式确实隐藏了，但是if语句不能正常工作。

$(document).ready(function(e){
    $("#usernamedrop").hide();
    $("#usernameradio").change(function(e){
        if($("#usernameradio").checked){
            $("#usernamedrop").show();
        }else {
            $("#usernamedrop").hide();
        }
    });
});

The html is the following: html如下：

<body>
<div id="logindiv">
<h1>What is the problem?</h1>
    <div>
        <div class="formentry">
            <input type="radio" name="troublekind" id="usernameradio" value="username">
            <label for="usernameradio">I forgot my username</label>
        </div>
        <div class="formentry">
            <input type="radio" name="troublekind" id="passwordradio" value="password">
            <label for="passwordradio">I forgot my password</label>
        </div>
    </div>
    <form id="usernamedrop">
        <h2>Please Enter</h2>
        <div class="formentry">
            <label for="dateofbirth">Date Of Birth</label><input type="date" name="dateofbirth" id="dateofbirth">
        </div>
        <div class="formentry">
             <label for="placeofbirth">Place Of Birth</label><input type="text" name="placeofbirth" id="placeofbirth">
        </div>
        <input type="submit" name="submitusernamedrop" value="Submit">
    </form>
</div>

Answer 1

You are mixing Vanialla JS and jQuery. 您正在混合Vanialla JS和jQuery。 $("#usernameradio") is a jQuery object and it doesn't have checked property. $("#usernameradio")是一个jQuery对象，没有checked属性。

You can get checked property using multiple ways: 您可以使用多种方法来检查属性：

this.checked; , Simple and best way ，简单而最佳的方法
$(this).is(':checked');
$(this).prop('checked');

Use 采用

$("#usernameradio").change(function(e){
    if(this.checked){
        $("#usernamedrop").show();
    }else {
        $("#usernamedrop").hide();
    }
});

Answer 2

Try 尝试

$("#usernameradio").change(function(e){
     if($(this).prop('checked')){
         $("#usernamedrop").show();
     }else {
         $("#usernamedrop").hide();
     }
 });

I use .prop to check if property has value or not prop('checked') returns true if the radio is checked. 我使用.prop检查属性是否具有值prop('checked')如果检查了单选，则返回true。

Answer 3

The property checked is on the DOM element, not the jQuery collection. checked的属性位于DOM元素上，而不是jQuery集合上。 this refers to the element, so you can do this.checked or $(this).prop('checked') . this是指元素，因此您可以执行this.checked或$(this).prop('checked') 。 Finally, you can also use toggle , which takes a "switch" to hide or show the element: 最后，您还可以使用toggle ，它需要一个“ switch”来隐藏或显示元素：

$("#usernameradio").change(function(){
    $("#usernamedrop").toggle(!this.checked);
});

此代码有什么问题？ .checked可能是我没有正确使用的那个

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-09-22 06:24:17

解决方案2
1 2014-09-22 06:27:06

解决方案3
0 2014-09-22 06:26:49

此代码有什么问题？ .checked可能是我没有正确使用的那个

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-09-22 06:24:17

解决方案2 1 2014-09-22 06:27:06

解决方案3 0 2014-09-22 06:26:49

解决方案1
2 已采纳 2014-09-22 06:24:17

解决方案2
1 2014-09-22 06:27:06

解决方案3
0 2014-09-22 06:26:49