[dreamweaver] 中怎么样定义单选框和复选框?

网页复选框的效果实现(图)

[编辑本段]

(一)如何实现复选框的全选和反选

解决思路：

全选的实现：遍历所有复选框，然后设置各多选项的checked属性为true。反选的实现：遍历所有复选框，获取复选框的checked属性值，是true的话则设置为false，否则设为true，即作当前值的相反设置。

具体步骤：

代码示例：

<script>

function

selectit(){

//设置变量form的值为name等于select的表单

var

form=document.select

//取得触发事件的按钮的name属性值

var

action=event.srcelement.name

for

(var

i=0i<form.elements.lengthi++){//遍历表单项

//将当前表单项form.elements对象简写为e

var

e

=

form.elements

//如果当前表单项的name属性值为ito，

//执行下一行代码。限定脚本处理的表单项范围。

if

(e.name

==

"ito")

/*如果单击事件发生在name为selectall的按钮上，就将当前表单项的checked属性设为true(即选中)，否则设置为当前设置的相反值(反选)*/

e.checked

=(action=="selectall")?(form.selectall.checked):(!e.checked)

}

}

</script>

<form

name="select">

<input

type="checkbox"

name="selectall"

onclick="selectit()">全选

<input

type="checkbox"

name="inverse"

onclick="selectit()">反选

<input

type="checkbox"

name="ito"

value="1">1

<input

type="checkbox"

name="ito"

value="2">2

<input

type="checkbox"

name="ito"

value="3">3

<input

type="checkbox"

name="ito"

value="4">4

<input

type="checkbox"

name="ito"

value="5">5

</form>

注意：本例中能被全选或反选的复选框必须设置name为ito。

技巧：在本例中其实不用遍历表单的每个元素，只需要遍历getelementsbyname("ito")集合就行了。

特别提示

代码运行后，选中”全选”复选框，所有name为ito的复选框将被选中，效果如图1.4.12所示。

图1.4.12

全选复选框

特别说明

本例需要掌握的内容是对表单项的遍历和复选框的选中或不选中状态的设置或获取。

checked

设置或获取复选框或单选钮的状态，true

为选中，false为不选中。

elements

获取以源顺序排列的指定表单中所有控件的集合(不包括图像类型的控件对象)。

①给你的表单添加选中属性：checked="checked"

②给你的表单元素复选框添加“禁用”属性：disabled="disabled"

<input type="checkbox" checked="checked" disabled="disabled">

方法如下：

1、首先我们要打开DW编辑工具

2、进入之后新建一个文件

3、在从中选择HTML文件，点击创建

4、这样我们就进入编辑界面了

5、接下来我们编辑上一个“p”标签，命名为box

6、在创建一个样式，写上.box{}

7、在css样式.box{}里加上这个代码“border:solid1px#333333”

8、这样在浏览器上就可以显示边框啦

---