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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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的memory_limit限制的方法分享
2012/02/21 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python requests模块cookie实例解析
2020/04/14 Python
python适合做数据挖掘吗
2020/06/16 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
地球物理学专业推荐信
2014/09/08 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
python标准库ElementTree处理xml
2022/05/20 Python