今天做的网站上有个地方的单选按钮是这样的:
这个需要做美化,我找到了一个办法,步骤如下:
1.先把按钮隐藏,然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。
2.按钮被隐藏起来了,怎么选中/反选按钮的状态呢?这就需要用label标签把按钮、i标签以及文字包裹起来,这样点击i标签和文字就可以设置按钮的选中状态了。
html代码如下:
<label><input type="radio" name="sex" value="男" checked><i></i> 男</label> <label><input type="radio" name="sex" value="女"><i></i> 女</label>
3.在按钮的选中状态改变后,css怎样能相应的改变图片呢?我原以为要用js来判断选中状态,不曾想css里也有对应的选择器了。
css代码如下:
input[type="radio"] {display:none;} /*隐藏按钮*/ label i { } /*设置通用样式,如宽高等*/ input[type="radio"] + i { } /*这里设置未选中时的背景图,内略*/ input[type="radio"]:checked + i { } /*这里设置选中时的背景图,内略*/
这是什么操作?我查了下,原来这是 :checked 是一个css3的伪类选择器,可以匹配每个选中的输入元素(仅适用于单选按钮或复选框)。
除此之外还有个识别禁用状态的 :disabled 伪类选择器,这次我没有使用。
+号选择器则代表相邻的元素。
Read More →
使用CSS美化表单(checkbox、radio)
$("#box").change(function () { //此时获取的已经是change后的值了 if($(this).prop("checked")){//如果全选按钮已经被选中 $(".sub").prop("checked",this.checked); }else{//如果全选按钮未被选中 $(".sub").prop("checked",false); } });
#box是全选按钮(它也是个复选框),.sub是底下各个条目的复选框。用的是jq的.prop()方法。
刚才同学做全选功能,出了问题,来问我。我拿到代码试了试,点击全选按钮,然后获取并判断它的checked值,结果没反应。
然后去调试,发现发现获取到的复选框(checkbox)的checked值始终是undefined,选中了也不变。这还怎么做?
难道要把复选框放到form标签里才行?或者是需要手动加上checked这个属性?都试了试,完全没用
想想两年前还在学校的时候,就做过全选和反选这样的功能,怎么现在就做不出来了呢?这个郁闷啊
于是去百度“jq怎么获取checked值”,百度出来的各个教程的方法和我一样啊,怎么人家能用我就不能用?
最后直接百度“checkbox checked undefined”,总算找到答案了。
原来,在jquery1.6版本有了变更:
checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。
也就是说如果checkbox在页面加载完毕时是选中的,那么返回的永远都是checked,如果一开始没被选中,则返回的永远是undefined。
然后怎么办呢, 用jq的.prop()方法。例子就是上边的代码了。
真想说过期信息害死人,以后搜索技术问题的时候最好去搜索选项里,把结果限制在最近一年之内。