Question

我试图找出一个代码，如果通过表单提交检查了一个或多个复选框，他们就会显示其内容。我接近这样做，但代码只能在单个而不是多个检查中使用。即使在检查后未经检查，内容也会被卡住。

$(document).ready(function(){   
    $(function(){
        $('form').submit(function(e){
            e.preventDefault();

            if ($('.checkEdu').is(':checked')) 
            {   $('#education').show();
            } else if ($('.checkWork').is(':checked')){
                $('#experience').show();
            } else if ($('.checkAbout').is(':checked')){
                $('#about').show();
            }
            else {
                $('#education').hide();
                $('#experience').hide();
                $('#about').hide();
            }
        });
    });
});

这是我试过的代码。感谢

Answer 1

我建议先将它们全部隐藏起来然后显示所选的那些：

$('#education').hide();
$('#experience').hide();
$('#about').hide();
if ($('.checkEdu').is(':checked')){
    $('#education').show();
}
if ($('.checkWork').is(':checked')){
    $('#experience').show();
}
if ($('.checkAbout').is(':checked')){
    $('#about').show();
}

Answer 2

试试这个。由于一次可以检查多个，因此需要单独检查。

$(function(){
    $('form').submit(function(e){
        e.preventDefault();
        $('#education').hide();
        $('#experience').hide();
        $('#about').hide();            
        if ($('.checkEdu').is(':checked')){   
            $('#education').show();
        }
        if ($('.checkWork').is(':checked')){
            $('#experience').show();
        }
        if ($('.checkAbout').is(':checked')){
            $('#about').show();
        }

    });
});

Answer 3

您的HTML代码将是这样的，

<form>
<input type="checkbox" class="checkEdu">
<input type="checkbox" class="checkWork">
<input type="checkbox" class="checkAbout">
<button type="submit">Submit</button>
</form>

<div id="education" style="display:none;">education</div>
<div id="experience" style="display:none;">experience</div>
<div id="about" style="display:none;">about</div>

添加以下jquery代码

$(function(){   
    $('form').submit(function(e){
        e.preventDefault();
        $('#education, #experience, #about').hide();
        $('[type="checkbox"]:checked').each(function(k,v){
            switch($(v).attr('class')){
                case 'checkEdu' : $('#education').show(); break;
                case 'checkWork' : $('#experience').show(); break;
                case 'checkAbout' : $('#about').show(); break;
            }
        });
    });
});

使用JQuery的复选框表单

3 个答案: