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").attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
  7. var isChecked = jQuery("input[type='radio'][name='radio'][value='2']").attr("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.清空下拉列表

jQuery操作radio、checkbox、select 集合的更多相关文章

  1. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  2. jQuery 操作 radio、select、checkbox

    <script type="text/javascript"> $(function () { 一.radio 1.获取选中值,三种方法都可以: $('input:ra ...

  3. jquery操作radio,checkbox

    1. 获取radio选中的value. $('input:radio[name=sex]:checked').val(); 2. 选择 radio 按钮 (Male). $('input:radio[ ...

  4. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...

  5. 使用JQUERY操作Radio

    发展中经常使用Radio为了实现用户的选择的影响.我在该项目中使用的一些JQUERY操作Radio该方法.这里分享,对于有需要的朋友参考的. 1.变化radio选择.引发一些结果 $("in ...

  6. 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中,附录 js 返回上一页

    1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr  变量一维数组) <div ...

  7. [转]jQuery操作radio、checkbox、select 集合.

    1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...

  8. jQuery操作radio、checkbox、select总结

    1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...

  9. jQuery设置radio、select、checkbox只读属性后,如何在后台得到数据

    1 设置表单的readonly属性 对于radio.select.checkbox来说,readonly属性对这三个标签不起什么作用. 2 设置表单的disabled属性 以radio为例说明. 代码 ...

随机推荐

  1. iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them

    UICollectionViewFlowLayout has cached frame mismatch This is likely occurring because the flow layou ...

  2. doc文件中的cer附件保存到本地

    在word文档中有一个cer附件,可以双击直接安装证书. 我想把它保存到本地文件系统中,直接选中复制下来的cer文件,使用时,系统提示是无效证书.怎么才能正确 保存到本地文件系统?方法如下: 1.双击 ...

  3. Python生成requirements.txt包依赖管理文件

    requirements.txt是Python的依赖管理软件,和Java的POM一样. requirements.txt会生成使用了pip安装后的依赖包,在正常环境下会生成这个目录下的包/usr/lo ...

  4. Nginx报Primary script unknown的错误解决

    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 改成红色部分变量 root   /usr/local/nginx/h ...

  5. [原创]SOAPUI工具介绍

    [原创]SOAPUI工具介绍 一 官方网站:http://www.soapui.org/二 下载地址:http://sourceforge.net/projects/soapui/files/三 so ...

  6. VS2015 打包winform 安装程序

    最近开发了一个小软件.由于需要打包.网上找了一些资料.然后整合了起来.希望对大家有所帮助.不全面请见谅. 打包控件 InstallShield-Limited-Edition  下面是注册地址 htt ...

  7. linux下的c++filt 命令

    我们知道, 在C++中, 是允许函数重载的, 也就引出了编译器的name mangling机制, 今天我们要介绍的c++filt命令便与此有关. 对于从事linux开发的人来说, 不可不知道c++fi ...

  8. Revit API修改链接文件房间边界

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] );//设置房间边界     ...

  9. Revit API创建墙的保温层修改墙厚度

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)]  / ;         ; ...

  10. 积跬步,聚小流-------js实现placeholder的效果

    前几天在"技术问答"上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说.了解的多了才干说起来言简意赅,用最简单的语言描写叙述最清晰的表达. 可是plac ...