在HTML中隐藏复选框 [英] Hiding a Check Box in HTML
本文介绍了在HTML中隐藏复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下两个复选框:
<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" name="cell" id="cell" data-on="Yes" data-off="No" />
<label for="blackBerry">4.If YES, is the cell phone a BlackBerry? (Y/N)</label>
<input type="checkbox" name="blackBerry" name="blackBerry" id= "blackBerry" data-on="Yes" data-off="No" />
仅当第一个问题选择为是"时,如何才能在页面上显示第二个问题?
How can I get the second question to display on the page, ONLY when the first one is selected as Yes?
谢谢.
推荐答案
您可以使用javascript
You can do this using javascript
JavaScript
var elem = document.getElementById('cell');
elem.addEventListener('click', function() {
var divElem = document.getElementById('divPhone');
if( this.checked){
divElem.style.display = 'block' ;
}
else{
divElem.style.display = 'none' ;
}
});
HTML
<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" name="cell"
id="cell" data-on="Yes" data-off="No" />
<div id="divPhone" class="hidden">
<label for="blackBerry">4.If YES, is the cell phone a BlackBerry?
(Y/N)</label>
<input type="checkbox" name="blackBerry" name="blackBerry"
id= "blackBerry" data-on="Yes" data-off="No" />
</div>
.hidden
{
display: none;
}
Check Fiddle
使用jQuery仍然更加简单.
It is still more simple using jQuery..
$('#cell').on('click', function() {
if(this.checked){
$('#divPhone').removeClass('hidden');
}
else{
$('#divPhone').addClass('hidden');
}
});
jQuery Fiddle
这篇关于在HTML中隐藏复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文