在今天下午编写代码的时候,写了一个回显的方法。用到了: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 οnclick="aa()">点我呀</button>
<button οnclick="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,也是够折腾人的!