當複選框被選中展開事業部

Question

我有一個複選框：

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" /> 
<div style="display:none"> 
This content should appear when the checkbox is checked 
</div> 

有沒有人有一個簡單的方法來做到這一點？

Answer 1

這將顯示它時，複選框被選中，並再次隱藏它時，複選框取消選中：

$('#mycheckbox').change(function() { 
    $(this).next('div').toggle(); 
}); 

...雖然這將是更好，如果你分配一個DIV的ID，所以它可以更迅速地選擇：

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" /> 
<div id="mycheckboxdiv" style="display:none"> 
    This content should appear when the checkbox is checked 
</div> 

<script type="text/javascript"> 
$('#mycheckbox').change(function() { 
    $('#mycheckboxdiv').toggle(); 
}); 
</script> 

http://jsfiddle.net/mblase75/pTA3Y/

如果你想顯示該div沒有再隱藏它，用.show()代替.toggle()。

Answer 2

$("#mycheckbox").click(function() { $(this).next("div").toggle() }) 

Answer 3

附加一個change事件，並檢查是否選中複選框。如果複選框被選中，顯示div。否則，隱藏它：

$('#mycheckbox').change(function(){ 
    if(this.checked) { 
     $(this).next().show(); 
    } else { 
     $(this).next().hide(); 
    } 
}); 

你也應該有一個看看jQuery docs，問這樣一個簡單的問題之前。

Answer 4

$("#mycheckbox").change(function(){ 
    $(this).next().toggle(this.checked); 
}); 

Answer 5

$("input#mycheckbox").click(function() { 
    if($(this).is(":checked") { 
     $("div").slideDown(); 
    } 
    else { 
     $("div").slideUp(); 
    } 
}) 

Answer 6

if ($("#mycheckbox").checked) { 
    $("div").style.display = "block"; 
} 

Answer 7

如果您正在尋找只CSS的解決方案，那麼這可以幫助你。

#toggle-content{ 
display:none; 
} 
#mycheckbox:checked ~ #toggle-content{ 
    display:block; 
    height:100px; 

} 

Fiddle