隱藏/顯示基於用戶選擇輸入的複選框

Question

試圖解決這個問題。我簡單地想要一個帶有複選框的靜態HTML表單。然後用戶點擊頁面，然後可以通過複選框進行選擇，選中的複選框或複選框將保留在頁面上，然後未選擇的複選框將簡單隱藏。

以下是我已經嘗試了最新的邏輯：

（簡化的2個複選框版，但要注意會有10）

$('#cbxShowHide').click(function(){ 
    this.checked?$('#div1').show(1000); 
    $('#div2').hide(1000); 
}); 

$('#cbxShowHide2').click(function(){ 
    this.checked?$('#div2').show(1000); 
    $('#div1').hide(1000); 
}); 

jsFiddle

HTML：

<div class="div1"> 
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> 
</div> 

<div class="div2"> 
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label> 
</div> 

Answer 1

看看這個解決方案

$("button").on("click", function() { 
 
     $("input[type=checkbox]:not(:checked)").parent().hide(); 
 
    })

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="div1"> 
 
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> 
 
</div> 
 

 
<div class="div2"> 
 
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label> 
 
</div> 
 

 
<button> 
 
    Hide Checkboxes 
 
</button>

Answer 2

嘗試使用：

if ($(this).is(':checked')){ 
    $('.div1').show(1000); 
    $('.div2').hide(1000); 
} 

注：$('.div1')而不是$('#div1')，因爲你使用類沒有標識。

希望這有助於。

---

$('#cbxShowHide').click(function(){ 
 
    
 
    if ($(this).is(':checked')){ 
 
     $('.div1').show(); 
 
     $('.div2').hide(); 
 
    }else{ 
 
     $('.div2').show(); 
 
    } 
 
}); 
 

 
$('#cbxShowHide2').click(function(){ 
 
    if ($(this).is(':checked')){ 
 
     $('.div2').show(); 
 
     $('.div1').hide(); 
 
    }else{ 
 
     $('.div1').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1"> 
 
    <input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> 
 
    <br> 
 
    div1 content 
 
    <br> 
 
</div> 
 
<hr/> 
 
<div class="div2"> 
 
    <input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label> 
 
    <br> 
 
    div2 content 
 
    <br> 
 
</div>

Answer 3

所有你需要做的是有兩個項目是類.div和.cbxShowHide，然後執行：

$('.cbxShowHide').change(function(){ 
    $('.div').show(1000); 
    if(this.checked) 
     $('.div').not($(this).parent()).hide(1000); 
}); 

Fiddle Example

這將隱藏所有點擊的項目，但你所點擊的元素。並在取消檢查時顯示要素。