显示，如果复选框被选中

我在页面上不同地方的几个复选框隐藏的div。当其中一个复选框被选中时，它下面的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功能，但只是似乎乱了点击功能是如何工作的。

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

});

因此，我试图将每个功能的点击功能，但似乎也没有帮助。我可能使这种方式比需要更复杂。任何帮助，将不胜感激！

一个的jsfiddle尝试和想象什么，我试图做http://jsfiddle.net/gDp8z/3/

来源

2014-02-27 zazvorniki

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

来源

2014-02-27 14:09:48

这似乎工作在小提琴，但在我的实际代码似乎并不奏效。第一个复选框工作正常，但是当你到达第二个复选框时，上传框已经消失，即使它不在那里，它也会尝试隐藏它。 – zazvorniki

你需要从每个环路删除单击处理程序，请参见：http://jsfiddle.net/gDp8z/11 –

我没有做到这一点。但我不知何故需要，如果声明，如果它已经检查刷新然后该div需要隐藏，如果它没有选中，那么它需要显示。因为切换不检查它是否已被检查。 – zazvorniki

显示，如果复选框被选中

回答

相关问题