checkbox,radio,selected相关操作
1、radio:单选框
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
js操作代码:
- jQuery("input[type='radio'][name='radio']:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中";
- jQuery('input[type="radio"][name="radio"]:checked').val(); // 获取一组radio被选中项的值
- jQuery("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 设置value = 2的一项为选中
- jQuery("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中
- jQuery("input[type='radio'][name='radio']").get(1).checked = true; // 设置index = 1,即第二项为当前选中
- var isChecked = jQuery("#radio2").is(":checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
- var isChecked = jQuery("input[type='radio'][name='radio'][value='2']").is(":checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;
2、checkbox:复选框
HTML代码:
- <input type="checkbox" name="checkbox" id="checkAll" />全选/取消全选
- <input type="checkbox" name="checkbox" id="checkbox_id1" value="1" />1
- <input type="checkbox" name="checkbox" id="checkbox_id2" value="2" />2
- <input type="checkbox" name="checkbox" id="checkbox_id3" value="3" />3
- <input type="checkbox" name="checkbox" id="checkbox_id4" value="4" />4
- <input type="checkbox" name="checkbox" id="checkbox_id5" value="5" />5
js操作代码:
- var val = jQuery("#checkbox_id1").val();// 获取指定id的复选框的值
- var isSelected = jQuery("#checkbox_id3").attr("checked"); // 判断id=checkbox_id3的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;
- jQuery("#checkbox_id3").attr("checked", true);// or
- jQuery("#checkbox_id3").attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾
- jQuery("#checkbox_id3").attr("checked", false);// or
- jQuery("#checkbox_id3").attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾
- jQuery("input[name=checkbox][value=3]").attr("checked", 'checked');// 将name=checkbox, value=3 的那个复选框选中,即打勾
- jQuery("input[name=checkbox][value=3]").attr("checked", '');// 将name=checkbox, value=3 的那个复选框不选中,即不打勾
- jQuery("input[type=checkbox][name=checkbox]").get(2).checked = true;// 设置index = 2,即第三项为选中状态
- jQuery("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
- alert(jQuery(this).val());
- });
- // 全选/取消全选
- jQuery(function() {
- jQuery("#checkAll").click(function(){
- if(jQuery(this).attr("checked") == true){// 全选
- jQuery("input[type=checkbox][name=checkbox]").each(function(){
- jQuery(this).attr("checked", true);
- });
- } else {// 取消全选
- jQuery("input[type=checkbox][name=checkbox]").each(function(){
- jQuery(this).attr("checked", false);
- });
- }
- });
- });
3、select:下拉框
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>
js操作代码:
- /**
- * jQuery获取select的各种值
- */
- jQuery("#select_id").change(function(){ // 1.为Select添加事件,当选择其中一项时触发
- //code...
- });
- var checkValue = jQuery("#select_id").val(); // 2.获取Select选中项的Value
- var checkText = jQuery("#select_id :selected").text(); // 3.获取Select选中项的Text
- var checkIndex = jQuery("#select_id").attr("selectedIndex"); // 4.获取Select选中项的索引值,或者:jQuery("#select_id").get(0).selectedIndex;
- var maxIndex = jQuery("#select_id :last").attr("index"); // 5.获取Select最大的索引值,或者:jQuery("#select_id :last").get(0).index;
- /**
- * jQuery设置Select的选中项
- */
- jQuery("#select_id").get(0).selectedIndex = 1; // 1.设置Select索引值为1的项选中
- jQuery("#select_id").val(4); // 2.设置Select的Value值为4的项选中
- /**
- * jQuery添加/删除Select的Option项
- */
- jQuery("#select_id").append("<option value='新增'>新增option</option>"); // 1.为Select追加一个Option(下拉项)
- jQuery("#select_id").prepend("<option value='请选择'>请选择</option>"); // 2.为Select插入一个Option(第一个位置)
- jQuery("#select_id").get(0).remove(1); // 3.删除Select中索引值为1的Option(第二个)
- jQuery("#select_id :last").remove(); // 4.删除Select中索引值最大Option(最后一个)
- jQuery("#select_id [value='3']").remove(); // 5.删除Select中Value='3'的Option
- jQuery("#select_id").empty(); // 6.清空下拉列表
来自:http://www.cnblogs.com/merlini/archive/2013/05/21/3090165.html
checkbox,radio,selected相关操作的更多相关文章
- checkbox radio 多次操作失效
checkbox radio 多次操作失效 , 将attr替换为prop $(this).attr('checked',true); $(this).attr('checked',false); $( ...
- input 的radio checkbox 和 select 相关操作
1 select 获取和设置值,以及onchange事件 1下拉框option没有checked事件 可通过select 的 onchange事件进行监控,以获取其值 <select name ...
- jquery.validate验证text,checkbox,radio,selected
index.cshtml <form id="formLogin" method="post"> <div> <label for ...
- JQuery对CheckBox的一些相关操作
一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...
- 【js】操作checkbox radio 的操作总结
摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...
- jquery 操作select,checkbox,radio (整理)
在工作中经经常使用到select,checkbox,radio,今天有点空暇就整理一下,免得以后用的时候还要又一次找. 操作select下拉框 -- 获取值或选中项: 1, $("#sele ...
- jquery的radio和checkbox的标签的操作集合
jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...
- jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...
随机推荐
- PHP学习笔记二十五【类的继承】
<?php //定义父类 class Stu{ public $name; protected $age; protected $grade; private $address;//私有变量不会 ...
- J2EE项目开发流程简介
开发流程(一) 提出需求:产品部提出本周期项目的具体需求. 项目计划:项目经理协调开发部.测试部和产品部进行需求协商,产生项目计划. 需求理解:开发部和测试部向产品部提出各自对需求的理解. 产品设计: ...
- 显示查询记录的前n条 mysql limit用法
按时间倒序出所有的数据 mysql order by createtime desc ; +----+------------------+ | id | id_no | +----+-------- ...
- Linux 下配置 SoftEther Client
我经常使用的代理有 SSH, GoAgent, FreeGate, VPN, HttpProxy 等等,不过 SoftEther 应该是我用过的最快.最稳定的 VPN 协议. Windows 下配置 ...
- GIT 实验
服务器环境:linux + git + gitolite(gitolite是什么,说白了就是安装后建了一个仓库,管理员用户可以通过修改并上传配置文件实现GIT仓库及其权限的管理.提醒:别用那个gito ...
- php在cli和cgi方式下获取服务器ip的实例
php cli方式下获取服务器ip php内核没有提供这样的命令,需要借助linux中的命令ifconfig来实现,如下两个函数代码: function getServerIp(){ ...
- Service、Alarm与BroadcastReceiver的使用方法
1:定义一个服务类,在服务类中使用AlarmManager 来管理服务的运行 public class WtacService extends Service{ private AlarmManage ...
- Keil C51 Data Overlaying
一般的编译器将函数中的区域变数动态配置在stack,等函数结束空间就释放出来.因为8051 的内部记忆体很少,只有区区128 或256 bytes,而且stack 也是共用这块记忆体.为了节省stac ...
- RIAidea – Focus on Flash/Flex/AIR » About Me
RIAidea – Focus on Flash/Flex/AIR » About Me Browse > Home > About Me Tuesday, May 20, 2014 | ...
- XMPP通讯开发-仿QQ显示好友列表和用户组
在 XMPP通讯开发-服务器好友获取以及监听状态变化 中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计 我们将两个合并起来,首先获取用户组,然后把用户组用List ...