Javascript 使用JQuery的复选框表单

我试图找出一个代码，如果通过表单提交选中一个或多个复选框，它们将显示其内容。我很快就要完成了，但是代码只在单个检查中有效，而不是在多个检查中有效。内容也会被卡住，即使它在检查后被取消检查

$(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();
            }
        });
    });
});

---

这是我试过的代码。谢谢

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

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

---

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

$(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();
        }

    });
});

---

您的

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>

---

如果能包含重现问题所需的最小HTML，那就太好了。另外，你能详细说明一下“代码只在单个检查中有效，而不是在多个检查中有效”吗？从隐藏所有检查开始，然后在单独的if中相应地取消隐藏。既然你是if else，那么你只能得到1或另一个。

$（文档）。准备好（function（）{}

和

$（function（）{}

做同样的事情。谢谢你，我实际上刚刚考虑过这个代码，并检查了这个代码来删除它。哈哈！

$(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;
            }
        });
    });
});