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 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
浅析php单例模式
2014/11/25 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python操作oracle的完整教程分享
2018/01/30 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
面料业务员岗位职责
2013/12/26 职场文书
廉洁教育学习材料
2014/05/19 职场文书
美食节目策划方案
2014/05/31 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
刑事撤诉申请书
2015/05/18 职场文书
实施意见格式范本
2015/06/05 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers