JS学习--002点击复选框出现下拉菜单
JS学习--002点击复选框出现下拉菜单
第一种方式：能保证一个的实现
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>复选框点击出现下拉菜单</TITLE>
</HEAD>
<input type="checkbox" id = "chk">
<div id="demo">
<select style="height:25px; line-height:22px; font-size:12px; padding:0;" name="command">
<option>是</option>
<option>或</option>
<option>非</option>
</select>
</div>
<s cript type="text/javas cript">
var chk = document.getElementById("chk");
var demo = document.getElementById('demo');
demo.style.display = "none";
chk.onclick = function()
{
if(chk.checked == false)
{
demo.style.display = "none";
}
else
{
demo.style.display = "block";
}
}
</s cript>
</div>
</body>
</html>
第二种方式：通过传参整体都能实现，一个页面中所有的项都能保证点击复选框后出现下拉框。
<input type="checkbox" id = "qyxx1" onclick="check('qyxx1','de1')">
<div id="de1" class="demo">
<select style=" float:left;height:25px; margin: 3px 0 0 10px; line-height:22px; font-size:12px; padding:0;" name="command">
<option>是</option>
<option>或</option>
<option>非</option>
</select>
</div>
<style>
.demo{display:none;}
</style>
<s cript type="text/javas cript">
function check(chk,demo){
var chk = document.getElementById(chk);
var demo = document.getElementById(demo);
if(chk.checked == false)
{
demo.style.display = "none";
}
else
{
demo.style.display = "block";
}
}
</s cript>
