1、radio:单选框

HTML代码:

  1. <input type="radio" name="radio" id="radio1" value="1" />1
  2. <input type="radio" name="radio" id="radio2" value="2" />2
  3. <input type="radio" name="radio" id="radio3" value="3" />3
  4. <input type="radio" name="radio" id="radio4" value="4" />4

js操作代码:

  1. jQuery("input[type='radio'][name='radio']:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中";
  2. jQuery('input[type="radio"][name="radio"]:checked').val(); // 获取一组radio被选中项的值
  3. jQuery("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 设置value = 2的一项为选中
  4. jQuery("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中
  5. jQuery("input[type='radio'][name='radio']").get(1).checked = true; // 设置index = 1,即第二项为当前选中
  6. var isChecked = jQuery("#radio2").is(":checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
  7. var isChecked = jQuery("input[type='radio'][name='radio'][value='2']").is(":checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;

2、checkbox:复选框

HTML代码:

  1. <input type="checkbox" name="checkbox" id="checkAll" />全选/取消全选
  2. <input type="checkbox" name="checkbox" id="checkbox_id1" value="1" />1
  3. <input type="checkbox" name="checkbox" id="checkbox_id2" value="2" />2
  4. <input type="checkbox" name="checkbox" id="checkbox_id3" value="3" />3
  5. <input type="checkbox" name="checkbox" id="checkbox_id4" value="4" />4
  6. <input type="checkbox" name="checkbox" id="checkbox_id5" value="5" />5

js操作代码:

  1. var val = jQuery("#checkbox_id1").val();// 获取指定id的复选框的值
  2. var isSelected = jQuery("#checkbox_id3").attr("checked"); // 判断id=checkbox_id3的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;
  3. jQuery("#checkbox_id3").attr("checked", true);// or
  4. jQuery("#checkbox_id3").attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾
  5. jQuery("#checkbox_id3").attr("checked", false);// or
  6. jQuery("#checkbox_id3").attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾
  7. jQuery("input[name=checkbox][value=3]").attr("checked", 'checked');// 将name=checkbox, value=3 的那个复选框选中,即打勾
  8. jQuery("input[name=checkbox][value=3]").attr("checked", '');// 将name=checkbox, value=3 的那个复选框不选中,即不打勾
  9. jQuery("input[type=checkbox][name=checkbox]").get(2).checked = true;// 设置index = 2,即第三项为选中状态
  10. jQuery("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
  11. alert(jQuery(this).val());
  12. });
  13. // 全选/取消全选
  14. jQuery(function() {
  15. jQuery("#checkAll").click(function(){
  16. if(jQuery(this).attr("checked") == true){// 全选
  17. jQuery("input[type=checkbox][name=checkbox]").each(function(){
  18. jQuery(this).attr("checked", true);
  19. });
  20. } else {// 取消全选
  21. jQuery("input[type=checkbox][name=checkbox]").each(function(){
  22. jQuery(this).attr("checked", false);
  23. });
  24. }
  25. });
  26. });

3、select:下拉框

HTML代码:

  1. <select name="select" id="select_id" style="width: 100px;">
  2. <option value="1">11</option>
  3. <option value="2">22</option>
  4. <option value="3">33</option>
  5. <option value="4">44</option>
  6. <option value="5">55</option>
  7. <option value="6">66</option>
  8. </select>

js操作代码:

  1. /**
  2. * jQuery获取select的各种值
  3. */
  4. jQuery("#select_id").change(function(){                         // 1.为Select添加事件,当选择其中一项时触发
  5. //code...
  6. });
  7. var checkValue = jQuery("#select_id").val();                    // 2.获取Select选中项的Value
  8. var checkText = jQuery("#select_id :selected").text();          // 3.获取Select选中项的Text
  9. var checkIndex = jQuery("#select_id").attr("selectedIndex");    // 4.获取Select选中项的索引值,或者:jQuery("#select_id").get(0).selectedIndex;
  10. var maxIndex = jQuery("#select_id :last").attr("index");        // 5.获取Select最大的索引值,或者:jQuery("#select_id :last").get(0).index;
  11. /**
  12. * jQuery设置Select的选中项
  13. */
  14. jQuery("#select_id").get(0).selectedIndex = 1;                  // 1.设置Select索引值为1的项选中
  15. jQuery("#select_id").val(4);                                    // 2.设置Select的Value值为4的项选中
  16. /**
  17. * jQuery添加/删除Select的Option项
  18. */
  19. jQuery("#select_id").append("<option value='新增'>新增option</option>");    // 1.为Select追加一个Option(下拉项)
  20. jQuery("#select_id").prepend("<option value='请选择'>请选择</option>");   // 2.为Select插入一个Option(第一个位置)
  21. jQuery("#select_id").get(0).remove(1);                                      // 3.删除Select中索引值为1的Option(第二个)
  22. jQuery("#select_id :last").remove();                                        // 4.删除Select中索引值最大Option(最后一个)
  23. jQuery("#select_id [value='3']").remove();                                  // 5.删除Select中Value='3'的Option
  24. jQuery("#select_id").empty();                                               // 6.清空下拉列表

来自:http://www.cnblogs.com/merlini/archive/2013/05/21/3090165.html

checkbox,radio,selected相关操作的更多相关文章

  1. checkbox radio 多次操作失效

    checkbox radio 多次操作失效 , 将attr替换为prop $(this).attr('checked',true); $(this).attr('checked',false); $( ...

  2. input 的radio checkbox 和 select 相关操作

    1  select 获取和设置值,以及onchange事件 1下拉框option没有checked事件 可通过select 的 onchange事件进行监控,以获取其值 <select name ...

  3. jquery.validate验证text,checkbox,radio,selected

    index.cshtml <form id="formLogin" method="post"> <div> <label for ...

  4. JQuery对CheckBox的一些相关操作

    一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...

  5. 【js】操作checkbox radio 的操作总结

    摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...

  6. jquery 操作select,checkbox,radio (整理)

    在工作中经经常使用到select,checkbox,radio,今天有点空暇就整理一下,免得以后用的时候还要又一次找. 操作select下拉框 -- 获取值或选中项: 1, $("#sele ...

  7. jquery的radio和checkbox的标签的操作集合

    jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...

  8. jquery的checkbox,radio,select等方法总结

    jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...

  9. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...

随机推荐

  1. T-SQL和PL/SQL 区别

    结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统:同时也是数据库 ...

  2. ArcEngine颜色可视化

    AE中利用.NET中的ColorDialog对话框,将color对象转化为ArcEngine中的IRgbColor (1)在实现颜色选择之前,需定义这两种颜色之间的转换函数 //Color转换为Rgb ...

  3. java Object 类

    Object o=new Object(); 其中有两个受保护的方法:             1.protected void finalize()             2.protected ...

  4. sql 模糊查询带下划线的字段 _

    1.SELECT * FROM dbo.tb_Test 2.SELECT * FROM dbo.tb_Test WHERE name LIKE '%c_%' 3.SELECT * FROM dbo.t ...

  5. Webform Lable

  6. 软件测试作业三 尝试使用JUnit

    写一个判断三角形种类的代码,对其进行测试. 判断三角形代码: package 测试1; public class sjx { public String f(int a,int b,int c) { ...

  7. 【JavaScript DOM 编程艺术】 笔记

    第一章:JavaScript 简史 1.1 javascript的起源 JavaScript是一种脚本语言,通常只能通过web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,需要由Web浏览 ...

  8. SAR ADC : 逐次逼近寄存器型(SAR)模数转换器(ADC)

    1.为实现二进制搜索算法,N位寄存器首先设置在中间刻度(即:100... .00,MSB设置为1).这样,DAC输出(VDAC)被设为VREF/2,VREF是提供给ADC的基准电压.然后,比较判断VI ...

  9. postgresql创建用户

    (1)内部命令create user 用户名 with superuser password '密码';              先进入数据库后用命令\h create user 查看帮助     ...

  10. How to use Request js (Node js Module) pools

    Can someone explain how to use the request.js pool hash? The github notes say this about pools: pool ...