html 中如何实现勾选后显示指定DIV

html-css08

html 中如何实现勾选后显示指定DIV,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>:checked</title>

<style type="text/css">

div {

   display:none

}

</style>

<!--使用:checked判断就可以了,如果选择上就返回true,不是返回false,用show显示,用hide隐藏(深圳网站建设:www.sz886.com)-->

<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) { 

    $("#Aaa").click(function(){

         if($(this).is(":checked")){

    $(".zl").show()

  }else{

$(".zl").hide()

 }

    })

       

 

})

</script>

</head>

 

<body>

<label><input id="Aaa" type="checkbox" class="xi">资料补充。</label>

<div class="zl">填写资料</div>

</body>

</html>

为checkbox控件加上checked属性即可默认打钩:

<input name="save" id="save" type="checkbox" onClick="save_ck(this)" checked>记住密码

<input name="auto" id="auto" type="checkbox" onClick="auto_ck(this)" checked>自动登录

如果想打钩后不能取消打钩,可以用JS为已打钩的checkbox增加disabled属性禁用控件。

function save_ck(ckbox) {

    var ckbox = document.getElementById(ckbox.id)

    ckbox.checked ? ckbox.disabled = true : ''

}

function auto_ck(ckbox) {

    var ckbox = document.getElementById(ckbox.id)

    ckbox.checked ? ckbox.disabled = true : ''

}