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

Strange jQuery radio button show/hide bug

本文关键字：隐藏 bug 显示 单选按钮 jQuery      更新时间：2023-09-26

我希望用户名文本字段显示当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();
        }
    });
});

您在每个case语句之后都缺少break语句。在我添加它们之后，它工作得很好!

您忘记了在每个case中使用'break':

    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;
    }
相关文章：