ZMX - IT技术交流论坛 - 无限Perfect，追求梦想 - itzmx.com

标题: jquery的checkbox,radio,select等方法总结 [打印本页]

作者: 柠檬墨绿色 时间: 2016/10/26 09:34
标题: jquery的checkbox,radio,select等方法总结
　　jquery的checkbox，radio，和select是jquery操作的一个难点和重点，很多前端新手对其了解不是很透彻。时间久了不用，我在写的时候有时也难免对某些操作支支吾吾，记不清楚，现在，对其做一些简单的总结！

　　1、checkbox日常jquery操作。现在我们以下面的html为例进行checkbox的操作。

　　<input id="checkAll" type="checkbox" />全选

　　<input name="subBox" type="checkbox" />项1

　　<input name="subBox" type="checkbox" />项2

　　<input name="subBox" type="checkbox" />项3

　　<input name="subBox" type="checkbox" />项4

　　全选和全部选代码：

　　<script type="text/javascript">

　　$（function（） {

　　$（"#checkAll"）。click（function（） {

　　$（'input[name="subBox"]'）。attr（"checked",this.checked）；

　　}）；

　　var $subBox = $（"input[name='subBox']"）；

　　$subBox.click（function（）{

　　$（"#checkAll"）。attr（"checked",$subBox.length == $（"input[name='subBox']:checked"）。length ? true : false）；

　　}）；

　　}）；

　　</script>

　　checkbox属性：

　　var val = $（"#checkAll"）。val（）；// 获取指定id的复选框的值

　　var isSelected = $（"#checkAll"）。attr（"checked"）； // 判断id=checkAll的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false;

　　$（"#checkAll"）。attr（"checked", true）；// or

　　$（"#checkAll"）。attr（"checked", 'checked'）；// 将id=checkbox_id3的那个复选框选中，即打勾

　　$（"#checkAll"）。attr（"checked", false）；// or

　　$（"#checkAll"）。attr（"checked", ''）；// 将id=checkbox_id3的那个复选框不选中，即不打勾

　　$（"input[name=subBox][value=3]"）。attr（"checked", 'checked'）；// 将name=subBox, value=3 的那个复选框选中，即打勾

　　$（"input[name=subBox][value=3]"）。attr（"checked", ''）；// 将name=subBox, value=3 的那个复选框不选中，即不打勾

　　$（"input[type=checkbox][name=subBox]"）。get（2）。checked = true;// 设置index = 2，即第三项为选中状态

　　$（"input[type=checkbox]:checked"）。each（function（）{ //由于复选框一般选中的是多个，所以可以循环输出选中的值

　　alert（$（this）。val（））；

　　}）；

　　2、radio的jquery日常操作及属性我们仍然以下面的html为例：

　　<input type="radio" name="radio" id="radio1" value="1" />1

　　<input type="radio" name="radio" id="radio2" value="2" />2

　　<input type="radio" name="radio" id="radio3" value="3" />3

　　<input type="radio" name="radio" id="radio4" value="4" />4

　　radio操作如下：

　　$（"input[name=radio]:eq（0）"）。attr（"checked",'checked'）； //这样就是第一个选中咯。

　　//jquery中，radio的选中与否和checkbox是一样的。

　　$（"#radio1"）。attr（"checked","checked"）；

　　$（"#radio1"）。removeAttr（"checked"）；

　　$（"input[type='radio'][name='radio']:checked"）。length == 0 ? "没有任何单选框被选中" : "已经有选中";

　　$（'input[type="radio"][name="radio"]:checked'）。val（）； // 获取一组radio被选中项的值

　　$（"input[type='radio'][name='radio'][value='2']"）。attr（"checked", "checked"）；// 设置value = 2的一项为选中

　　$（"#radio2"）。attr（"checked", "checked"）； // 设置id=radio2的一项为选中

　　$（"input[type='radio'][name='radio']"）。get（1）。checked = true; // 设置index = 1，即第二项为当前选中

　　var isChecked = $（"#radio2"）。attr（"checked"）；// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;

　　var isChecked = $（"input[type='radio'][name='radio'][value='2']"）。attr（"checked"）；// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;www.9ask.cn/yangzhou/

欢迎光临 ZMX - IT技术交流论坛 - 无限Perfect，追求梦想 - itzmx.com (https://bbs.itzmx.com/)