顯示，如果複選框被選中

我在頁面上不同地方的幾個複選框隱藏的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

顯示，如果複選框被選中

回答

相關問題