Question

我在页面的不同位置有几个复选框。当选中其中一个复选框时，它下面的div应该消失，表示他们不希望上传任何文件。

我可以使用复选框来解决这个问题，但是我的问题出现了，因为我正在调用同一个类来完成这项工作，因为我试图让它尽可能动态。主要是因此我不必为每个复选框编写单独的函数。

<div class="className">
    <p class="mailCheck "><input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check" <span>I dont wish to upload files at this time.</span></p>

    <div class="hideDiv hideUpload">
        <p>Upload box I wish to hide.</p>
    </div>
</div>

和我一直在玩的jquery。

我在这里试了几件事。首先，我只有if语句在用户刷新时工作，然后我有了click功能。但似乎既不适用于单个复选框，也不适用于整个组。

if($('.mailCheck input:checked').length == 1){
        $(this).closest('div').find('.hideUpload').hide();
    }else {
        $(this).closest('div').find('.hideUpload').show();
    }

    $('.mailCheck input').on('click', function(){
        if($('.mailCheck input:checked').length == 1){
            $(this).closest('div').find('.hideUpload').slideUp();
        }else {
            $(this).closest('div').find('.hideUpload').slideDown();
        }
    });

然后我尝试将上面的代码放在.each函数中，但这似乎搞砸了click函数应该如何工作。

$('.mailCheck input').each(function() {

});

所以我尝试从每个函数中取出click函数，但这似乎也没有帮助。我可能会比这更复杂。任何帮助将不胜感激！

尝试可视化我要做的事情的{jsFiddle http://jsfiddle.net/gDp8z/3/

Answer 1

使用onchange事件，而不是onclick，然后检查具体的复选框：

jsFiddle

$('.mailCheck input').on('change', function(){
        if(this.checked){
            $(this).closest('div').find('.hideUpload').slideUp();
        }else {
            $(this).closest('div').find('.hideUpload').slideDown();
        }
    }).change();

或使用slideToggle()：

jsFiddle

$('.mailCheck input').on('change', function () {
    $(this).closest('div').find('.hideUpload').slideToggle();
});

如果选中复选框，则显示和隐藏div

1 个答案: