Question

我希望在选择op1和op2时显示用户名文本字段，如果选择了op3，则显示两个文本字段。我有一个奇怪的错误，选中的任何单选按钮将始终显示用户名和密码文本字段。为什么会这样？

HTML：

<div>Please select operation:<br />
    <input type="radio" id="op1" name="op" value="check_username">Check Username<br />
    <input type="radio" id="op2" name="op" value="find_profile">Find Profile<br />
    <input type="radio" id="op3" name="op" value="check_credentials">Check Credentials
</div><br />

<div id="un">Username:<br /><input type="text" /></div>
<div id="pwd">Password:<br /><input type="text" /></div>

jQuery的：

$(document).ready(function() {
    $('#un, #pwd').hide();
    $('input[name="op"]').prop('checked', false);
    $("input[type=button]").attr("disabled", "disabled");

    $('input:radio[name=op]').change(function() {
        var op = $('input:radio[name=op]:checked').val();
        alert(op);
        switch(op) {
            case 'check_username':
            $('#un').show();
            $('#pwd').hide();
            case 'find_profile':
            $('#un').show();
            $('#pwd').hide();
            case 'check_credentials':
            $('#un, #pwd').show();
        }
    });
});

Answer 1

在每个break语句后，您都缺少case个语句。我添加它们之后是working fine！

Answer 2

在每种情况下你都忘记了'休息'：

    switch(op) {
        case 'check_username':
        $('#un').show();
        $('#pwd').hide();
        break;
        case 'find_profile':
        $('#un').show();
        $('#pwd').hide();
        break;
        case 'check_credentials':
        $('#un, #pwd').show();
        break;
    }

奇怪的jQuery单选按钮显示/隐藏错误

2 个答案: