根據多個複選框切換div可見性

我有多個複選框。檢查它們中的任何一個都會使div可見。不選中它們會隱藏div。它幾乎工作，感謝尼克（http://stackoverflow.com/questions/4337378/toggle-div-based-on-checkbox-value），除了我想多個複選框來切換分區。根據多個複選框切換div可見性

HTML：

<div id="somediv"> 
<input type="checkbox" class="form-checkbox" value="a" name="a"> 
<input type="checkbox" class="form-checkbox" value="b" name="b"> 
<input type="checkbox" class="form-checkbox" value="c" name="c"> 
<input type="checkbox" class="form-checkbox" value="d" name="d"> 
</div> 

<div id="tog">tog content</div>

的jQuery：

 var tog = $("#tog").hide(); 
     $('#somediv .form-checkbox').change(function() {    
      if ($(tog).css('display') == 'none') { 
      tog.show(); 
      }  
     });

還有一句：

 var tog = $("#tog").hide(); 
     $('#somediv .form-checkbox').change(function() {     
      $(tog).toggle(this.checked); 
     }).change();

我缺少什麼？問題是取消選中其中一個（不是全部）隱藏div。僅當沒有選中時才需要，然後隱藏。並且默認隱藏。如果有任何選中，所以保持可見，不切換。

任何提示將非常感激。謝謝

來源

2011-11-10 swan

嘗試 -

var tog = $("#tog").hide(); 
$('#somediv .form-checkbox').change(function() {     
    $(tog).toggle($('.form-checkbox:checked').length > 0); 
}).change();

演示 - http://jsfiddle.net/VA4NP/

這是非常simila r到你的第二個代碼示例。它使用$('.form-checkbox:checked').length > 0作爲傳遞給toggle功能的參數，如果任何複選框被選中，它應該返回true。

來源

2011-11-10 13:05:30 ipr101

+1。使用：checked選擇器，然後檢查長度是一個非常優雅的解決方案。循環遍歷每個複選框並測試其checked屬性是另一種方法，但它需要比此更多的代碼。 – maxedison

完美。感謝美麗的代碼。 – swan

你是對的你靠近。您的更改事件所做的只是考慮選中或未選中複選框的選中狀態。因此，在更改事件中，您只需查看是否選中了任何複選框。

也許是這樣的：

var tog = $("#tog").hide(); 
$('#somediv .form-checkbox').change(function() { 
    if($('#somediv .form-checkbox').is(':checked').length > 0) 
    { 
     $(tog).show(); 
    } 
    else 
    { 
     $(tog).hide(); 
    } 
}).change();

來源

2011-11-10 13:04:34 ptfaulkner

謝謝，但我不能讓它工作 – swan

嘗試的東西，如：

var tog = $("#tog").hide(); 
    $('#somediv .form-checkbox').change(function() { 
     if ($('#somediv .form-checkbox').is(':checked').length > 0) { 
     tog.show(); 
     } else { 
     tog.hide(); 
     } 
    });

來源

2011-11-10 13:04:55 ezakto

謝謝，但我沒有運氣讓它工作。 – swan

nvm。 @ ipr101得到了更好的解決方案。 – ezakto

試試這個：

var tog = $("#tog").hide(); 
$('#somediv').change(function(){ 
    if($('#somediv').find('input:checked').length === 0) 
    { 
     tog.hide(); 
    } 
    else 
    { 
     tog.show(); 
    } 
});

兩件事情，這裏要注意。首先，您可以使用$(this).find而不是重新運行選擇器。我不是100％確定在這種情況下（div或複選框）this指向什麼。其次，如果你有一個容器充滿了你想訂閱事件的輸入，那麼它更有效地將偵聽器附加到父對象上。複選框中的更改事件將冒泡到div。

來源

2011-11-10 13:08:45 arb

這也適用，除了var tog = $（「＃tog」）。hide（）;應放置在事件之外。非常感謝。我學到了很多 – swan

你絕對正確！我做了調整。 – arb

根據多個複選框切換div可見性

回答

相關問題