html表单复选框(html复选框的常用属性)
今天给各位分享html表单复选框的知识，其中也会对html复选框的常用属性进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
html复选框
多选一应该使用单选框呀，把你的<form>...</form>部分贴上来看看。
补充：
那你的意思是说，这个<form>里面的checkbox，至少要选中一个，否则就算空，因为不能要求所有都必须选择，是？
那样我认为，可以用循环检测所有的checkbox，如果有一个选中就设置变量has1为true，我写了下面的例子代码：
<form name='form1'>
<input type='checkbox' name='VoteOption1' value=1>通过本课程学习了解<br>
<input type='checkbox' name='VoteOption1' value=2>掌握具体的网络方法<br>
<input type='checkbox' name='VoteOption1' value=3>掌握一些基本原理与方法
</form>
<script type=text/javascript>
has1=false;
for(i=0;i<document.form1.length;i++)
if(document.form1.elements[i].type=='checkbox')
if(document.form1.elements[i].checked) has1=true;
if(has1==false) alert('一个都没有选');
</script>
复选框的效果实现
解决思路：
全选的实现：遍历所有复选框，然后设置各多选项的checked属性为true。反选的实现：遍历所有复选框，获取复选框的checked属性值，是true的话则设置为false，否则设为true，即作当前值的相反设置。
具体步骤：
代码示例：
<script>
function selectit(){
//设置变量form的值为name等于select的表单
var form=document.select
//取得触发事件的按钮的name属性值
var action=event.
for(var i=0;i<form.elements.length;i++){//遍历表单项
//将当前表单项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获取以源顺序排列的指定表单中所有控件的集合(不包括图像类型的控件对象)。<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>网页特效代码--复选框全选、全不选和反选的效果实现</title>
<SCRIPT LANGUAGE=JavaScript>
<!-- Begin
function checkAll(){
for(var j= 1; j<= 9; j++){
box= eval(document.checkboxform.C+ j);
if(box.checked==false) box.checked=true;
}
}
function uncheckAll(){
for(var j= 1; j<= 9; j++){
box= eval(document.checkboxform.C+ j);
if(box.checked==true) box.checked=false;
}
}
function switchAll(){
for(var j= 1; j<= 9; j++){
box= eval(document.checkboxform.C+ j);
box.checked=!box.checked;
}
}
// End-->
</script>
</head>
<body>
<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 checked>C9<br>
<br>
<input type=button value=全部选中 onClick=checkAll()><br>
<input type=button value=全部不选 onClick=uncheckAll()><br>
<input type=button value=选择转换 onClick=switchAll()><br>
</form>
</body>
</html>
HTML表单介绍
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
form action="
请输入你的姓名：
input type="text" name="yourname"
input type="submit" value="提交"
/form
学习HTML表单(Form)最关键要掌握的有三个要点：
表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type="text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：
表单控件(Form Contros)说明
input type="text"单行文本输入框
input type="submit"将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox"复选框
input type="radio"单选框
select下拉框
textArea多行文本输入框
input type="password"密码输入框(输入的文字用*表示)
表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
input type="text" name="yourname"
表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：
input type="checkbox" name="fruit" value="apple"苹果br
input type="checkbox" name="fruit" value="orange"桔子br
input type="checkbox" name="fruit" value="mango"芒果br
用checked表示缺省已选的选项。
input type="checkbox" name="fruit" value="orange" checked桔子br
表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
input type="radio" name="fruit" value="Apple"苹果br
input type="radio" name="fruit" value="Orange"桔子br
input type="radio" name="fruit" value="Mango"芒果br
用checked表示缺省已选的选项。
input type="radio" name="fruit" value="Orange" checked桔子br
表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
select name="fruit"
option value="apple"苹果
option value="orange"桔子
option value="mango"芒果
/select
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
select name="fruit" multiple
用户还可以用size属性来改变下拉框(Select)的大小。
表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
textarea name="yoursuggest" cols="50" rows="3"/textarea
其中cols表示textarea的宽度，rows表示textarea的高度。
表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：
input type="password" name="yourpw"
表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：
input type="submit" value="提交"
表单控件(Form Control)：图片提交(input type="image")
input type=image相当于 input type=submit，不同的是，input type=image以一个图片作为表单的提交按钮，其中 src属性表示图片的路径。
input type="image" src="images/icons/go.gif"
alt="提交" NAME="imgsubmit"
关于html表单复选框的内容到此结束，希望对大家有所帮助。