jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值 .

最新推荐文章于 2022-08-31 11:04:35 发布
最新推荐文章于 2022-08-31 11:04:35 发布
阅读量532 收藏
点赞数
文章标签： jquery input autocomplete function 浏览器 button

jquery中 如何设置和取得 radio， checkbox， select， multiple的select 的值，稍微整理了一下。 先放在这里，以后如果有更深刻的认识，再来维护此文章。

注意引用一个jquery的包。


[html] view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>radio，checkbox，select的使用</title>  
  6.     <script src="./js/jquery-1.6.2.js"></script>  
  7.     <script>  
  8.         $(document).ready(function () {  
  9.               
  10.             // 屏蔽浏览器表单默认的记忆功能  
  11.             $('input').attr("autocomplete", "off");  
  12.               
  13.             // radio设置默认值  
  14.             $('input:radio[id=rd2]').attr("checked","checked");  
  15.             // checkbox设置默认值  
  16.             $('input:checkbox[id=ch2]').attr("checked","checked");  
  17.             $('input:checkbox[id=ch3]').attr("checked","checked");  
  18.             // select设置默认值  
  19.             $('#weekSelect').val("2");  
  20.             // multiple的select设置默认值  
  21.             $('#studentSelect').val(["2","3"]);  
  22.               
  23.             // 取值  
  24.             $('#submitBtn').click(function () {  
  25.                 // radio选中的内容  
  26.                 alert($('input:radio[name=color]:checked').val());  
  27.                 // checkbox选中的内容  
  28.                 $('input:checkbox[name=size]:checked').each( function() {  
  29.                       alert($(this).val());  
  30.                 });  
  31.                 // select选中的内容  
  32.                 alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());  
  33.                 // multiple的select选中的内容  
  34.                 var student = $("#studentSelect").val();  
  35.                 for(var key in student){  
  36.                   alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());  
  37.                 }      
  38.             });  
  39.         });                  
  40.     </script>  
  41. </head>  
  42.   
  43. <body>  
  44.      <div id="colorRadio">  
  45.         <input type="radio" name="color" id="rd1" value="Red" />Red  
  46.         <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow  
  47.         <input type="radio" name="color" id="rd3" value="Blue" />Blue  
  48.     </div>  
  49.     <br>  
  50.     <div id="sizeCheck">  
  51.         <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt  
  52.         <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt  
  53.         <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt  
  54.     </div>  
  55.     <br>  
  56.     <div>  
  57.     <select id="weekSelect">  
  58.         <option value="1">星期一</option>  
  59.         <option value="2">星期二</option>  
  60.         <option value="3">星期三</option>  
  61.         <option value="4">星期四</option>  
  62.         <option value="5">星期五</option>  
  63.         <option value="6">星期六</option>  
  64.         <option value="7">星期日</option>  
  65.     </select>  
  66.     </div>  
  67.     <br>  
  68.     <div>  
  69.     <select id="studentSelect" multiple="multiple" >  
  70.         <option value="1">张三</option>  
  71.         <option value="2">李四</option>  
  72.         <option value="3">王五</option>  
  73.     </select>  
  74.     </div>  
  75.     <input type="button" id="submitBtn" value="Get Value" />  
  76. </body>  
  77. </html>  
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>radio，checkbox，select的使用</title>
    <script src="./js/jquery-1.6.2.js"></script>
    <script>
        $(document).ready(function () {
            
            // 屏蔽浏览器表单默认的记忆功能
            $('input').attr("autocomplete", "off");
            
            // radio设置默认值
            $('input:radio[id=rd2]').attr("checked","checked");
            // checkbox设置默认值
            $('input:checkbox[id=ch2]').attr("checked","checked");
            $('input:checkbox[id=ch3]').attr("checked","checked");
            // select设置默认值
            $('#weekSelect').val("2");
            // multiple的select设置默认值
            $('#studentSelect').val(["2","3"]);
            
            // 取值
            $('#submitBtn').click(function () {
                // radio选中的内容
                alert($('input:radio[name=color]:checked').val());
                // checkbox选中的内容
                $('input:checkbox[name=size]:checked').each( function() {
                      alert($(this).val());
                });
                // select选中的内容
                alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());
                // multiple的select选中的内容
                var student = $("#studentSelect").val();
                for(var key in student){
                  alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());
                }    
            });
        });                
    </script>
</head>

<body>
     <div id="colorRadio">
	    <input type="radio" name="color" id="rd1" value="Red" />Red
	    <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow
	    <input type="radio" name="color" id="rd3" value="Blue" />Blue
	</div>
	<br>
	<div id="sizeCheck">
	    <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt
	    <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt
	    <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt
	</div>
	<br>
	<div>
	<select id="weekSelect">
	    <option value="1">星期一</option>
	    <option value="2">星期二</option>
	    <option value="3">星期三</option>
	    <option value="4">星期四</option>
	    <option value="5">星期五</option>
	    <option value="6">星期六</option>
	    <option value="7">星期日</option>
	</select>
	</div>
	<br>
	<div>
	<select id="studentSelect" multiple="multiple" >
	    <option value="1">张三</option>
	    <option value="2">李四</option>
	    <option value="3">王五</option>
	</select>
	</div>
	<input type="button" id="submitBtn" value="Get Value" />
</body>
</html>


java_pp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input标签中autocomplete="off" 失效的解决办法
dhlctaqzyba39516的博客
10-21 2011
在做用户注册的时候因为密码输入框 input type=“password”造成的，用户名密码总是自动填充，加上autocomplete="off"也无效，后面找到一种简单的解决方法，不多说看代码： 解决方法： 　　1、type="password"改成type="text" 　　2、给input标签添加自定义属性flag="password" <div clas...
django-checkboxselectmultiple:使用多个复选框而不是 Django 小部件
06-14
django-checkboxselectmultiple 使用多个复选框代替<select multiple> Django 小部件。 使用它而不是 Django 的默认值的好处是更好地与 Django Admin 集成。 Javascript 基于 Stefano Contini 的代码 安装 您可以使用 pip 安装 django-checkboxselectmultiple pip install https://github.com/MagicSolutions/django-checkboxselectmultiple/archive/master.zip 并把它INSTALLED_APPS INSTALLED_APPS = ( ... 'checkboxselectmultiple', ... ) 用法 您可以将小部件设置为表单字段 from
jquery插件实现下拉多选checkbox的效果
11-20
jquery-ui-multiselect实现多选下拉框的效果，支持下拉多选的一个小demo
JQuery带checkbox多选的下拉列表
08-11
JQuery带checkbox多选的下拉列表,功能非常强大，浏览器兼容性也很强, 浏览器兼容性如下： IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大，扩展性也很强
jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值
闭月羞花猫
02-08 9297
20120808 于新城科技园 jquery中 如何设置和取得 radio， checkbox， select， multiple的select 的值，稍微整理了一下。 先放在这里，以后如果有更深刻的认识，再来维护此文章。 注意引用一个jquery的包。 radio，checkbox，select的使用         $(d
给所有的input设置 autocomplete="off"
腾讯全栈-ITCJF
08-17 1万+
有些浏览器会自动填充表单， 比如firefox， 但有时我们又不希望浏览器自动填充  所以我们会使用 autocomplete="off" 属性告诉浏览器不要自动填充  但是每个input都要写一次autocomplete="off" 就显得很冗余了  还好，可以通过js在页面load后对所有的input修改此属性，下面是一个jquery的版本：  // 去掉所有input的autocomplet...
解决html中刷新页面后checkbox还选中的问题
weixin_30695195的博客
02-28 371
今天在测试代码时候发现在电脑360浏览器和手机浏览器中的checkbox选中后，按f5刷新页面后checkbox还是选中的。 解决方法是：将autocomplete="off" 这个配置在from上或者你的checkbox上。 <form autocomplete="off"> <input id="butAll" style="vertical-a...
input标签中autocomplete="off"失效的具体解决办法
younghard的博客
08-16 1万+
废话不说先来看问题 解决的思路： 根据网上的资料得知是因为密码输入框 input type=“password”造成的，所以我的解决思路是先把密码输入框的type="password"改成type="text",然后在获取焦点的时候把它改回来； 解决的具体方法： 1、type="password"改成type="text"； 2、给input标签添加自定义属性 我是这样处理的
input autocomplete="off"属性的作用
大海无量的博客
08-21 5341
https://blog.csdn.net/zhenyu5665/article/details/55102171
select multiple 取值问题 及jquery 的实现（type 是 select-multiple 不是 select-one ）
ISaiSai的专栏
12-10 9169
1     2     3     4     5 使用原生的javascript 脚本只能够取得第一个选中的第一个的值 var z =   document.getElementById("mymultiple"); alert(z.value) 可以通过轮训所有selected 的option 取得所有选中的数值 jquery 或者第三方类库 会返回1,2,3,4
jQuery multiselect初始化及默认值修改
tucailing的专栏
05-22 1万+
jsp                                                         0}">                                   ${dimScenes.sceneName}
jquery操作select(取值，设置选中）
qiuweifan的博客
08-31 1万+
jquery操作select(取值，设置选中）
jquery获取select的多个选中值
djm_1218的博客
05-09 7104
下面的控件可以选择多个select的值&lt;select multiple="" class="chosen-select form-control" name="assistantDirectorIds" id="assistantDirectorIds"  data-placeholder="请选择..."&gt;&lt;/select&gt;如下效果          
python 复选框_关于python：Django多项选择字段/复选框选择多项
weixin_35029527的博客
12-24 1802
我有一个Django应用程序，想要在用户的个人资料中显示多个选择复选框。 然后，他们将能够选择多个项目。这是我的models.py的简化版本：from profiles.choices import SAMPLE_CHOICESclass Profile(models.Model):user = models.ForeignKey(User, unique=True, verbose_name_(...
html 原生下拉菜单 select ，多选 multiple
热门推荐
FungLeo's Blog
09-23 2万+
1 2 3 4 5 只要加上 multiple 参数即可实现多选。做个记录。
select 下拉框多选，用select代替checkbox
那些年的代码
09-15 2005
分类：JS技巧jQuery 演示：http://www.freejs.net/demo/524/index.html <select class="demo" multiple="multiple"> <optgroup label="Languages"> <option value="cp">C++...
select多选和checkbox复选的值在js和action中的展现形式
Try My Best 尽力而为
03-15 139
话不多说，例如在前端页面： &lt;body&gt; &lt;button type="button" class="btn btn-info" onclick="show()"&gt;测试&lt;/button&gt; &lt;form action="/amp/test/query"&gt; &lt;select multipl
js 将checkbox, radio, select控件设置为只读不可选
最新发布
06-01
要将checkbox、radio和select控件设置为只读不可选，可以使用以下方法： 1. 使用JavaScript禁用控件： 对于checkbox和radio控件，可以使用以下代码禁用控件： ```javascript document.getElementById("checkboxId").disabled = true; ``` 对于select控件，可以使用以下代码禁用控件： ```javascript document.getElementById("selectId").disabled = true; ``` 2. 使用CSS样式设置控件为只读： 对于checkbox和radio控件，可以使用以下CSS样式设置控件为只读： ```css input[type="checkbox"][readonly], input[type="radio"][readonly]{ pointer-events: none; } ``` 对于select控件，可以使用以下CSS样式设置控件为只读： ```css select[readonly] { pointer-events: none; } ``` 以上代码中，pointer-events属性设置为none，表示鼠标事件将被忽略，从而实现了控件只读不可选的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值