jQuery设置和获取select、checkbox、radio的选中值方法


Posted in Javascript onJanuary 01, 2017

select、checkbox、radio是很常用的表单控件,熟练掌握操作它们的方法,会加快我们的开发速度。

设置单选下拉框的选中值

如果option中没有value属性,那可以通过text设置选中项;

如果option中有value属性,那必须通过value设置选中项。

1)option中没有value属性:

<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>
$("#btn1").click(function() {
  //【方法1】
  $("#single").val("选择3号");
  //【方法2】
  $("#single").val(["选择3号"]);
  //【方法3】
  $("#single option:eq(2)").prop("selected", true);
});

2)option中有value属性:

<select id="single">
  <option value="1">选择1号</option>
  <option value="2">选择2号</option>
  <option value="3">选择3号</option>
</select>
$("#btn1").click(function() {
  //【方法1】
  //通过val("选择3号")设置选中项无效
  $("#single").val("选择3号");
  //通过val("3")设置选中项有效
  $("#single").val("3");
  //【方法2】
  $("#single option:eq(2)").prop("selected", true);
});

设置多选下拉框的选中值

多选下拉框默认的选中值是“选择1号”和“选择3号”。如果用val()的方式设置选中值是“选择2号”和“选择4号”,那只有“选择2号”和“选择4号”会被选中;如果用prop(“selected”, true)的方式设置选中值是“选择2号”和“选择4号”,那默认的“选择1号”和“选择3号”以及“选择2号”和“选择4号”都会被选中。

<select id="multiple" multiple="multiple">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option selected="selected">选择3号</option>
  <option>选择4号</option>
  <option>选择5号</option>
</select>
$("#btn2").click(function () {
  //【方法1】
  $("#multiple").val(["选择2号", "选择4号"]);
  //【方法2】
  $("#multiple option:eq(1)").prop("selected", true);
  $("#multiple option:eq(3)").prop("selected", true);
});

设置多选框的选中值

多选框默认的选中值是“check1”。如果用val()的方式设置选中值是“check2”和“check4”,那只有
“check2”和“check4”会被选中;如果用prop(“selected”, true)的方式设置选中值是“check2”和“check4”,那默认的“check1”以及“check2”和“check4”都会被选中。

<input type="checkbox" name="hobby" value="check1" checked="checked"/>多选1
<input type="checkbox" name="hobby" value="check2"/>多选2
<input type="checkbox" name="hobby" value="check3"/>多选3
<input type="checkbox" name="hobby" value="check4"/>多选4
<input type="checkbox" name="hobby" value="check5"/>多选5
$("#btn3").click(function () {
  //【方法1】
  $("input[type=checkbox][name=hobby]").val(["check2","check4"]);
  //【方法2】
  $("input[type=checkbox][name=hobby]:eq(1)").prop("checked", true);
  $("input[type=checkbox][name=hobby]:eq(3)").prop("checked", true);
});

设置单选框的选中值

设置单选框的选中值不能用val(“volleyball”),必须用val([“volleyball”])。

<input type="radio" name="sport" value="soccer"/>足球
<input type="radio" name="sport" value="volleyball"/>排球
<input type="radio" name="sport" value="baseball"/>棒球
<input type="radio" name="sport" value="badminton"/>羽毛球
<input type="radio" name="sport" value="pingpong"/>乒乓球
$("#btn4").click(function () {
  //【方法1】
  $("input[type=radio][name=sport]").val(["volleyball"]);
  //【方法2】
  $("input[type=radio][name=sport]:eq(1)").prop("checked", true);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js 通用订单代码
Dec 23 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP常用代码
2006/11/23 PHP
php中的实现trim函数代码
2007/03/19 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
法院实习人员自我鉴定
2013/09/26 职场文书
网游商务专员求职信
2013/10/15 职场文书
九年级历史教学反思
2014/01/27 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android