jquery的checkbox,radio,select等方法小结


Posted in Javascript onAugust 30, 2016

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;

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").attr("index");    // 5.获取Select最大的索引值,或者:$("#select_id :last").get(0).index; 
  /** 
   * 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_id").get(0).selectedIndex=index;//index为索引值

 //设置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的checkbox,radio和select有了一定的了解了吧,温故而知新,用多了就会变的熟练起来,即使有时候忘记了,也可以来翻一翻!

Javascript 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
js实现无缝滚动特效
Dec 20 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
AngularJS轻松实现双击排序的功能
Aug 30 #Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 #Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 #Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
js数组的基本使用总结
2021/01/18 Javascript
python3 shelve模块的详解
2017/07/08 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
应届生求职信写作技巧
2013/10/24 职场文书
第二课堂活动总结
2014/05/07 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js