关于Jquery中的:checkbox

在今天下午编写代码的时候，写了一个回显的方法。用到了:checkbox，但是在网页中一直无法显示，F12查看也不会报错。所以就仔仔细细又看一遍代码，刚开始也没有发现什么错误，下面附上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
	</head>
	<body>
		<form id="ff">
			<input type="text" id="username" /><br />
			<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="0" />女
			
			<br />
			
			<input type="checkbox" name="hobby" value="吃" />吃
			<input type="checkbox" name="hobby" value="喝" />喝
			<input type="checkbox" name="hobby" value="拉" />拉
			<input type="checkbox" name="hobby" value="撒" />撒
			<br />
			
			<select id="sel">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				
			</select>
			
		</form>
		
		<button onclick="aa()">点我呀</button>
		<button onclick="bb()">回显</button>
		<script>
			function aa(){
				//jquery获取值：$( " " ).val();都是小括号，没有中括号
				var username=$("#username").val();
				var sex=$("#ff input[name='sex']:checked").val();
				var hobbys=$("#ff :checkbox[name='hobby']:checked");
				//alert(hobbys.length);
			/*	for(var i =0;i<hobbys.length;i++){
					alert($(hobbys[i]).val());
				}*/
				$.map(hobbys, function(obj) {
					alert(obj.value);
				});
			}
			//回显
			function bb(){
				$("#username").val("嘻嘻");
				$("#ff input[name='sex'][value="+0+"]").attr("checked",true);   //attr(name|properties|key,value|fn)  这里用的是key,value模式，attr用来设置或返回被选元素的属性值。
				var hh="吃,喝".split(",");
			/*	for(var i=0;i<hh.length;i++){
					$("input :checkbox[name='hobby'][value="+hh[i]+"]").attr("checked",true);
				}*/
				
				
				$.map(hh, function(n) {
					$("input :checkbox[name='hobby'][value="+n+"]").attr("checked",true);
				});
			}
		</script>
	</body>
</html>

运行的结果是这样的：

F12查看也不会报错：

但是后来我发现在这里有个问题：

我又看了一遍关于:checkbox的api，发现在input与:checkbox之间是不可以有空格的，当我把空格去了以后，页面就可以按照我规定的选项回显hobby。

所以这种小细节一定要注意啊，要不然这种不报错的小BUG，也是够折腾人的！

关于Jquery中的:checkbox

猜你喜欢