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
Sorry, the comment form is closed at this time.
[…] 1、checkbox操作 […]