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>