JQuery操作三大控件(下拉,单选,复选)的方法

来源:www.13sc.com | 游客上传 | 336 次浏览 | 0 条评论

搜索: JQuery 下拉 单选 复选 

JQuery操作(下拉,单选,复选)Radio、DropDownList、CheckBox三大控件,示例代码如下,感兴趣的朋友可以学习下,希望对大家有所帮助

复制代码 代码如下:

Radion
<input type="radio" name="rd" id="rd1" checked="checked" value="rd1" />
<input type="radio" name="rd" id="rd2" value="rd2" />
<input type="radio" name="rd" id="rd3" value="rd3" />
1.获取选中值,三种方法都可以:
$("!!input:radio:checked"!!).val();
$("input[type="!!radio"!!]:checked").val();
$("input[name="!!rd"!!]:checked").val();
2.设置第一个Radio为选中值:
$("!!input:radio:first"!!).attr("!!checked"!!, "!!checked"!!);
或者
$("!!input:radio:first"!!).attr("!!checked"!!, "!!true"!!);
注:attr("checked","!!checked"!!)= attr("checked", "!!true"!!)= attr("checked",true)
3.设置最后一个Radio为选中值:
$("!!input:radio:last"!!).attr("!!checked"!!, "!!checked"!!);
或者
$("!!input:radio:last"!!).attr("!!checked"!!, "!!true"!!);
4.根据索引值设置任意一个radio为选中值:
$("!!input:radio"!!).eq(索引值).attr("!!checked"!!, "!!true"!!);索引值=0,1,2....
或者
$("!!input:radio"!!).slice(1,2).attr("!!checked"!!, "!!true"!!);
5.根据Value值设置Radio为选中值
$("input:radio[value="!!rd2"!!]").attr("!!checked"!!,"!!true"!!);
或者
$("input[value="!!rd2"!!]").attr("!!checked"!!,"!!true"!!);
6.删除Value值为rd2的Radio
$("input:radio[value="!!rd2"!!]").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$("!!input:radio"!!).each(function(index,domEle){
//写入代码
});
DropDownList
<select id="sel">
<option value="1" selected="selected">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
<option value="5">e</option>
</select>
1. 获取选中项的Value值:
$("!!select#sel option:selected"!!).val();
或者
$("!!select#sel"!!).find("!!option:selected"!!).val();
获取选中项的Text值:
$("!!select#seloption:selected"!!).text();
或者
$("!!select#sel"!!).find("!!option:selected"!!).text();
2. 获取当前选中项的索引值:
$("!!select#sel"!!).get(0).selectedIndex;
3. 获取当前option的最大索引值:
$("!!select#sel option:last"!!).attr("index")
4. 获取DropdownList的长度:
$("!!select#sel"!!)[0].options.length;
或者
$("!!select#sel"!!).get(0).options.length;
5. 设置第一个option为选中值:
$("!!select#sel option:first"!!).attr("!!selected"!!,"!!true"!!)
或者
$("!!select#sel"!!)[0].selectedIndex = 0;
6.设置最后一个option为选中值:
$("!!select#sel option:last).attr("!!selected"!!,"!!true"!!)
7. 根据索引值设置任意一个option为选中值:
$("!!select#sel"!!)[0].selectedIndex =索引值;索引值=0,1,2....
8. 设置Value=4 的option为选中值:
$("!!select#sel"!!).attr("!!value"!!,"!!4"!!);
或者
$("select#sel option[value="!!4"!!]").attr("!!selected"!!, "!!true"!!);
9. 删除Value=3的option:
$("select#sel option[value="!!3"!!]").remove();
10.删除第几个option:
$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:
$(" select#sel option ").eq(2).remove();
11.删除第一个option:
$(" select#sel option ").eq(0).remove();
或者
$("select#sel option:first").remove();
12. 删除最后一个option:
$("select#sel option:last").remove();
13. 删除dropdownlist:
$("select#sel").remove();
14.在select后面添加一个option:
$("select#sel").append("<option value="!!6"!!>f</option>");
15. 在select前面添加一个option:
$("select#sel").prepend("<option value="!!0"!!>0</option>");
16. 遍历option:
$("!! select#sel option "!!).each(function (index, domEle) {
//写入代码
});
CheckBox
<input type="checkbox" id="ck1" name="ck" vlaue="1" checked="checked" />
<input type="checkbox" id="ck2" name="ck" vlaue="2" />
<input type="checkbox" id="ck3" name="ck" vlaue="3" />
<input type="checkbox" id="ck4" name="ck" vlaue="4" />
1. 获取单个checkbox选中项(三种写法):
$("input:checkbox:checked").val()
或者
$("input:[type="!!checkbox"!!]:checked").val();
或者
$("input:[name="!!ck"!!]:checked").val();
2. 获取多个checkbox选中项:
$("!!input:checkbox"!!).each(function() {
if ($(this).attr("!!checked"!!) ==true) {
alert($(this).val());
}
});
3. 设置第一个checkbox 为选中值:
$("!!input:checkbox:first"!!).attr("checked","!!checked"!!);
或者
$("!!input:checkbox"!!).eq(0).attr("checked","!!true"!!);
4. 设置最后一个checkbox为选中值:
$("!!input:radio:last"!!).attr("!!checked"!!, "!!checked"!!);
或者
$("!!input:radio:last"!!).attr("!!checked"!!, "!!true"!!);
5. 根据索引值设置任意一个checkbox为选中值:
$("!!input:checkbox).eq(索引值).attr("!!checked"!!, "!!true"!!);索引值=0,1,2....
或者
$("!!input:radio"!!).slice(1,2).attr("!!checked"!!, "!!true"!!);
6. 选中多个checkbox:
同时选中第1个和第2个的checkbox:
$("!!input:radio"!!).slice(0,2).attr("!!checked"!!,"!!true"!!);
7. 根据Value值设置checkbox为选中值:
$("input:checkbox[value="!!1"!!]").attr("!!checked"!!,"!!true"!!);
8. 删除Value=1的checkbox:
$("input:checkbox[value="!!1"!!]").remove();
9. 删除第几个checkbox:
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10.遍历checkbox:
$("!!input:checkbox"!!).each(function (index, domEle) {
//写入代码
});
11.全部选中
$("!!input:checkbox"!!).each(function() {
$(this).attr("!!checked"!!, true);
});
12.全部取消选择:
$("!!input:checkbox"!!).each(function () {
$(this).attr("!!checked"!!,false);
});

标签: JQuery 下拉 单选 复选

最热-javascript类库

jquery 实现的全选和反选

JQuery打造PHP的AJAX表单提交实例

基于jQuery的消息提示插件 DivAlert之旅(二)

jquery 学习之二 属性(html()与html(val))

jquery实现心算练习代码

jquery ui dialog ie8出现滚动条的解决方法

js前台判断开始时间是否小于结束时间

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

Yii-自定义删除确认弹框(zyd)jquery实现代码

jquery获取tr中控件值并操作tr实现思路

JQuery 无废话系列教程(一) jquery入门 [推荐]

海量经典的jQuery插件集合

Copyright 2009-2013 13sc.com All Rights Reserved.