js复选框选中时显示子内容

JavaScript010

js复选框选中时显示子内容,第1张

js复选框选中时显示子内容显示所有完成的未完成的任务”这个复选框选中的话,就应该显示所有的任务.反之,就只显示未完成的任务

对于这个复选框,我们需要时刻获取它的值,并且去修改它的

js 实现 选中复选框 文字变色的方法,涉及 javascript 鼠标事件及页面元素的相关操作技巧。

CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。

<script

language="javascript">

function

cli(Obj)

{

//获取控制其它复选框的对象obj

var

collid

=

document.getElementByIdx_x("all")

//获取需要全选,全不选功能的所有复选框

var

coll

=

document.getElementsByName(Obj)

//如果obj被选中,则全选

if

(collid.checked){

//循环设置所有复选框为选中状态

for(var

i

=

0

i

<

coll.length

i++)

coll[i].checked

=

true

}else{//取消obj选中状态,则全不选

//循环设置所有复选框为未选中状态

for(var

i

=

0

i

<

coll.length

i++)

coll[i].checked

=

false

}

}

</script>

----------------------------------------------------

下面是一组CheckBox复选框html代码

----------------------------------------------------

<input

name='多选项名称'

type='checkbox'

value=''

id="all"

onclick="cli('多选项名称')">

全选

<input

name='多选项名称'

type='checkbox'

value=''

>

A

<input

name='多选项名称'

type='checkbox'

value=''

>

B

<input

name='多选项名称'

type='checkbox'

value=''

>

C

<input

name='多选项名称'

type='checkbox'

value=''

>

D

<input

name='多选项名称'

type='checkbox'

value=''

>

E

<input

name='多选项名称'

type='checkbox'

value=''

>

F

----------------------------------------------------

本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:

1.设置单选按钮

单选按钮在表单中即<input

type="radio"

/>它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.

先贴上一个例子:

复制代码

代码如下:<script

type="text/javascript">

function

getChoice()

{

var

oForm

=

document.forms["uForm1"]

var

aChoices

=

oForm.camera

for

(i

=

0

i

<

aChoices.length

i++)

//遍历整个单选项表

if

(aChoices[i].checked)

//如果发现了被选中项则退出

break

alert("相机品牌是:"

+

aChoices[i].value)

}

function

setChoice(iNum)

{

var

oForm

=

document.forms["uForm1"]

oForm.camera[iNum].checked

=

true

}

</script>

<form

method="post"

name="uForm1"

action="addInfo.aspx">

相机品牌:

<p>

<input

type="radio"

name="camera"

id="canon"

value="Canon">

<label

for="canon">Canon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="nikon"

value="Nikon">

<label

for="nikon">Nikon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="sony"

value="Sony"

checked>

<label

for="sony">Sony</label>

</p>

<p>

<input

type="radio"

name="camera"

id="olympus"

value="Olympus">

<label

for="olympus">Olympus</label>

</p>

<p>

<input

type="radio"

name="camera"

id="samsung"

value="Samsung">

<label

for="samsung">Samsung</label>

</p>

<p>

<input

type="radio"

name="camera"

id="pentax"

value="Pentax">

<label

for="pentax">Pentax</label>

</p>

<p>

<input

type="radio"

name="camera"

id="others"

value="其它">

<label

for="others">others</label>

</p>

<p>

<input

type="submit"

name="btnSubmit"

id="btnSubmit"

value="Submit"

class="btn">

</p>

<p>

<input

type="button"

value="检测选中对象"

onclick="getChoice()">

<input

type="button"

value="设置为Canon"

onclick="setChoice(0)">

</p>

</form>