jquery radio、 checkbox、 select 操作
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签
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的复选框的值 $('#checkAll').prop('checked');//jquery较新版本使用prop
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;
3、select下拉框的日常jquery操作
select操作相比checkbox和radio要相对麻烦一些,我们仍然以下面的html为例来说明:
<select name="select" id="select_id" style="width: 100px;">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
看select的如下属性:
$("#select_id").change(function(){ // 1.为Select添加事件,当选择其中一项时触发
//code...
});
var checkValue = $("#select_id").val(); // 2.获取Select选中项的Value
var checkText = $("#select_id :selected").text(); // 3.获取Select选中项的Text
var checkIndex = $("#select_id").attr("selectedIndex"); // 4.获取Select选中项的索引值,或者:$("#select_id").get(0).selectedIndex;
var maxIndex =$("#select_id :last").get(0).index; // 5.获取Select最大的索引值
/**
* jQuery设置Select的选中项
*/
$("#select_id").get(0).selectedIndex = 1; // 1.设置Select索引值为1的项选中
$("#select_id").val(4); // 2.设置Select的Value值为4的项选中
/**
* jQuery添加/删除Select的Option项
*/
$("#select_id").append("<option value='新增'>新增option</option>"); // 1.为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='请选择'>请选择</option>"); // 2.为Select插入一个Option(第一个位置)
$("#select_id").get(0).remove(1); // 3.删除Select中索引值为1的Option(第二个)
$("#select_id :last").remove(); // 4.删除Select中索引值最大Option(最后一个)
$("#select_id [value='3']").remove(); // 5.删除Select中Value='3'的Option
$("#select_id").empty(); $("#select_id").find("option:selected").text(); // 获取select 选中的 text : $("#select_id").val(); // 获取select选中的 value: $("#select_id").get(0).selectedIndex; // 获取select选中的索引: //设置select 选中的value:
$("#select_id").attr("value","Normal");
$("#select_id").val("Normal");
$("#select_id").get(0).value = value; //设置select 选中的text,通常可以在select回填中使用
var numId=33 //设置text==33的选中!
var count=$("#select_id option").length;
for(var i=0;i<count;i++)
{ if($("#select_id").get(0).options[i].text == numId)
{
$("#select_id").get(0).options[i].selected = true;
break;
}
}
jquery radio、 checkbox、 select 操作的更多相关文章
- Radio Checkbox Select 操作
一个小总结 <!DOCTYPE html> <html> <head> <meta name="description" content= ...
- jSP的3种方式实现radio ,checkBox,select的默认选择值。
jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...
- 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中,附录 js 返回上一页
1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr 变量一维数组) <div ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- jQuery对input select操作小结
//遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...
- jquery的一些select操作小记
添加option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }) ...
- jQuery radio|checkbox的取值与赋值
文章简单即是美[我说的是技术博客] |--radio |--checkbox 参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...
- JQuery对checkbox的操作
对复选框组的全选.全不选.不全选,获取选中的复选框的值的操作 点击全选按钮,复选框组全部选中或者全部取消. 实现全选按钮和复选框组的联动,当复选框组中有一个没有被选中后,那么id=‘checkedAl ...
- jquery radio 行选中 操作
想实现点击一行中任意位置 此行的 radio 选中. function rowClick(t) { var id = $(t).attr("id").substr(3, 1); / ...
- jquery对checkbox的操作汇总
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
随机推荐
- 【codeforces 768D】Jon and Orbs
[题目链接]:http://codeforces.com/contest/768/problem/D [题意] 你有一个水晶; 它每天都会产生一个球??(球有k种) 然后每种球产生的可能性是相同的-& ...
- 利用Date类计算生活时间
今天学习到了Date类还有其他一些常用类! 这里就简单使用Date及其一些方法计算生活时间. import java.text.ParseException; import java.text.Sim ...
- wait-notify模型面试题
一道面试题: 启动两个线程, 一个输出 1,3,5,7-99, 另一个输出 2,4,6,8-100 最后 STDOUT 中按序输出 1,2,3,4,5-100 错误实现1: public class ...
- Clojure:导入lein项目到IntelliJ IDEA
首先,我们需要先创建一个lein项目(废话..) lein new [项目名称] 然后生成Maven的pom.xml文件 cd [项目目录] lein pom 最后,在InteliJ IDEA中选择导 ...
- springmvc mybatis 分页插件 pagehelper
springmvc mybatis 分页插件 pagehelper 下载地址:pagehelper 4.2.1 , jsqlparser 0.9.5 https://github.com/pagehe ...
- 自定cell(XIB)团购思路
自定cell(XIB)团购思路 步骤一.先解析plist文件,创建model层数据. - (instancetype)initWithDict:(NSDictionary *)dict { s ...
- Java 7 可执行的 Nashorn,取代 Rhino
惊现有人把 OpenJDK 上的 Nashorn dump 下来,使得 Java 7 都能够使用.源代码在 https://bitbucket.org/ramonza/nashorn-backport ...
- React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...
- Codeforces Round #332 (Div. 2) B. Spongebob and Joke 模拟
B. Spongebob and Joke While Patrick was gone shopping, Spongebob decided to play a little trick ...
- Catalan数(卡特兰数)
Catalan数(卡特兰数) 卡特兰数:规定h(0)=1,而h(1)=1,h(2)=2,h(3)=5,h(4)=14,h(5)=42,h(6)=132,h(7)=429,h(8)=1430,h(9)= ...