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

html-css06

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 : ''

}

三、单选:radio

1.首先是定位选择框的位置

2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就可以了)

3.先点击boy后,等十秒再点击girl,观察页面变化

四、复选框:checkbox

1.勾选单个框,比如勾选selenium这个,可以根据它的id=c1直接定位到点击就可以了。

2.那么问题来了:如果想全部勾选上呢?

五、全部勾选:

1.全部勾选,可以用到定位一组元素,从上面源码可以看出,复选框的type=checkbox,这里可以用xpath语法:.//*[@type='checkbox']

2.这里注意,敲黑板做笔记了:find_elements是不能直接点击的,它是复数的,所以只能先获取到所有的checkbox对象,然后通过for循环去一个个点击操作

六、判断是否选中:is_selected()

1.有时候这个选项框,本身就是选中状态,如果我再点击一下,它就反选了,这可不是我期望的结果,那么可不可以当它是没选中的时候,我去点击下;当它已经是选中状态,我就不点击呢?那么问题来了:如何判断选项框是选中状态?

2.判断元素是否选中这一步才是本文的核心内容,点击选项框对于大家来说没什么难度。获取元素是否为选中状态,打印结果如下图。

3.返回结果为bool类型,没点击时候返回False,点击后返回True,接下来就很容易判断了,既可以作为操作前的判断,也可以作为测试结果的判断。