checkbox 获得值

maomaozgc

浏览: 336198 次
性别:
来自: 北京

最近访客更多访客>>

morelily

isjian

chenweinjupt

aje

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript_css_html

Safari Opera 浏览器 HTML

js 如何控制checkbox选中的个数。
如何让value属性传值给后台，而前台页面提示框显示标签后的内容？

具体代码：

<html>
<head><title></title>
</head>
<script type="text/javascript">

function check(component){
	var strArray = document.getElementsByName("smallclassauthorize");
	var content = document.getElementById("divcheck");
	
    if(content.innerHTML!=""){
	      content.innerHTML="";
	}
   var lengthstr=0;//合计选中的个数
    
   for(var i=0;i<strArray.length;i++){	

		if(strArray[i].checked==true){		   
			lengthstr++;
			if(lengthstr > 2){
			   component.checked=false;
		       alert("对不起，你只能选择两项");
			   return false;
		    }
		content.innerHTML +="这是第"+lengthstr+"选中:"+ strArray[i].nextSibling.nodeValue;
//.value(只能获得checkbox 中value属性的值)
//改成.nextSibling.nodeValue(这样可以获得<input>节点后兄弟节点的内容。)
			if(i > 1){
				content.innerHTML+="<br/>";
			}
		}
	}	
}


</script>
<body>

<input name="smallclassauthorize" type="checkbox" onclick="check(this);" value="小类一"/>小类一<br />
<input name="smallclassauthorize" type="checkbox" onclick="check(this);" value="小类二"/>小类二<br />
<input name="smallclassauthorize" type="checkbox" onclick="check(this);" value="小类三"/>小类三s

<div id="divcheck">
</div>
</body>
</html>

注意：

1：nextSibling属性

        该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。

       需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同.

     <body> <div> <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" /> <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" /> </div> </bod     这是因为input作为创建各种表单输入控件的标签，无论是生成button、checkbox、radio...等或其他表单控件，IE都会自动在后面创建一个1字节位的空白。

       IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。

不过现在的浏览器不会有这样的问题。
在<input />inputcontent 后面直接由.nextSibling.nodeValue拿到值。
(再FF下使用.childNodes也有同样的问题)

       opera和safari对nextSibling的处理方式与FF一致

        2：previousSibling属性

        该属性与nextSibling属性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身，但前提必须是：该标签元素的后面必须有一个同级的元素，否则就返回null了。

       3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

       一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

参考文献：
http://www.witpark.com/article/20/6467.html

一般情况下：

            x.parentNode.previousSibling.childNodes[0]

            x.parentNode.previousSibling.getElementsByTagName('xx')[0]

    //以下方法可以避免此种问题

            x.parentNode.parentNode.getElementsByTagName('xx')[0]

分享到：

frame之间的空隙 | struts异常处理

2009-12-09 17:33
浏览 1697
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论