javascript操作checkbox

JavaScript操作checkbox在开发中比较常见,例如可以用来检查checkbox项目是否一个都没有选中,如果都没有被选中的话则不能进行表单提交。

假设页面中有如下的checkbox选项:

北京
上海
深圳

1、获取被选中的checkbox的value:

var checkboxObj = document.getElementsByName("city");
for(var i = 0; i < checkboxObj.length; i++){ if(checkboxObj[i].checked){ alert(checkboxObj[i].value + " 被选中"); } }

说明
在HTML里面只要NAME属性的值一样就默认是数组,可以直接引用。

2、获取被选中的checkbox的text:

var checkboxObj = document.getElementsByName("city");
for(var i = 0; i < checkboxObj.length; i++){ if(checkboxObj[i].checked){ alert(checkboxObj[i].nextSibling.nodeValue); } }

说明:
nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。
详细介绍见:http://www.w3school.com.cn/xmldom/prop_node_nextsibling.asp

nodeValue属性可根据节点的类型来设置或返回某个节点的值。
详细介绍见:http://www.w3school.com.cn/xmldom/prop_document_nodevalue.asp

3、创建checkbox
(1)首先我们需要一个容器:

(2)接下来就可以创建checkbox了:

function createChk(){
var divObj = document.getElementById("dd");
divObj.insertAdjacentHTML("beforeEnd","昆明");
}

说明
insertAdjacentHTML用来在指定的地方插入html内容和文本内容。详细介绍见:
http://www.blogjava.net/Scott/archive/2007/08/30/141449.html

4、如何从服务端获取checkbox

对于Java程序而言,在服务端可以通过如下语句获取选中的checkbox的value值:

String[] cities = request.getParameterValues("city");
for(int i = 0; i < cities.length; i++){ System.out.println(cities[i]); }

参考链接:
http://topic.csdn.net/t/20060308/23/4601923.html

此条目发表在sitebuild分类目录,贴了, 标签。将固定链接加入收藏夹。

javascript操作checkbox》有一条回应

  1. Pingback引用通告: 爱J2EE » Jquery入门三:表单对象操作

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据