saber 酱的抱枕

Fly me to the moon

06/5
2017
学习

使用CSS美化表单（checkbox、radio）

saber 撰写 无回复 2,727次查看

今天做的网站上有个地方的单选按钮是这样的：

使用CSS美化表单（checkbox、radio）

这个需要做美化，我找到了一个办法，步骤如下：

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）

08/22
2015
学习

jq中获取checkbox的checked值

saber 撰写 无回复 1,581次查看 
$("#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()方法。例子就是上边的代码了。

真想说过期信息害死人，以后搜索技术问题的时候最好去搜索选项里，把结果限制在最近一年之内。

jq中获取checkbox的checked值