单选:

  获取值:$("input[name='rdo']:checked").val();

  设置值:$("input[name='rdo'][value='3']").prop("checked", true)

      $("input[name='rdo']:eq(2)").prop("checked", true)

      $("input[name='rdo']").eq(2).prop("checked", true)

      $("input[name='rdo']").get(2).checked = true

多选:

  获取值:      

function getCheckedValues() {
var arr = new Array();
$("input[name='chk']:checked").each(function() {
arr.push($(this).val());
});
return arr.join(",");
}

  设置值:

      $("input[name='chk']").val(["2", "3"])

      $("input[name='chk']").val("2,3".split(","))

select单选:

  获取值:$("#drp").val()    说明:.val()处理select元素, 当没有选择项被选中,它返回null

  设置值:$("#drp").val(3)

select多选:  

  获取值: $("#selectDuo").val() 

  设置值:同上面的多选框

<html>
<head>
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
div {
padding: 10px;
}
hr{border-bottom: solid 1px #ccc;line-height:10px;width:100%}
</style>
<script> //单选 begin******************************************************************
//获取单选值
function getRadioValue() {
var val = $("#dan input[name='rdo']:checked").val();
$("#info").html(val);
} //根据值或索引选中
function setRadioValue() { //1.根据值选中radio
$("#dan input[name='rdo'][value='3']").prop("checked", true); //2.根据索引选中radio
//$("#dan input[name='rdo']:eq(2)").prop("checked", true); //3.根据索引选中radio
//$("#dan input[name='rdo']").eq(2).prop("checked", true); //4.根据索引选中radio
//$("#dan input[name='rdo']").get(2).checked = true;
}
//单选 end****************************************************************** //多选 begin******************************************************************
//获取多选值,多个以逗号分隔
function getCheckboxValue() {
var arr = new Array();
$("#duo input[name='chk']:checked").each(function () {
arr.push($(this).val());
});
$("#info").html(arr.join(","));
}
//设置多选
function setCheckboxValue() {
//1.根据数组值选中
//$("#duo input[name='chk']").val(["2", "3"]); //2.根据字符串值选中
var vals = "2,3"
$("#duo input[name='chk']").val(vals.split(","));
}
//多选 end****************************************************************** //下拉***********************************************************************
function getSelectValue() {
var val = $("#drp").val();
$("#info").html(val); //var val = $("#drp :checked").val();
}
//设置多选
function setSelectValue() {
var val = $("#drp").val("3");
} //select多选 begin**************************************************************
function getSelectDuoValue() {

        var val = $("#selectDuo").val();
        $("#info").text(val);

        }
//设置多选
function setSelectDuoValue() {
var val = $("#selectDuo").val(["2","3"]);
}
//select多选 end************************************************************** </script>
</head>
<body>
<div style="color:#f00">结果:<span id="info" style="height:30px"></span></div>
<div id="dan">
<input type="radio" name="rdo" id="radio1" value="1" />1
<input type="radio" name="rdo" id="radio2" value="2" />2
<input type="radio" name="rdo" id="radio3" value="3" />3
<input type="radio" name="rdo" id="radio4" value="4" />4
</div>
<div>
<input type="button" value="获取当前值" onclick="getRadioValue()" />
<input type="button" value="设置值为3的选中" onclick="setRadioValue()" />
</div>
<hr />
<div id="duo">
<input type="checkbox" name="chk" id="checkbox1" value="1" />1
<input type="checkbox" name="chk" id="checkbox2" value="2" />2
<input type="checkbox" name="chk" id="checkbox3" value="3" />3
<input type="checkbox" name="chk" id="checkbox4" value="4" />4
</div>
<div>
<input type="button" value="获取当前值" onclick="getCheckboxValue()" />
<input type="button" value="设置值为2,3的选中" onclick="setCheckboxValue()" />
</div>
<hr />
<div>
<select id="drp">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<input type="button" value="获取当前值" onclick="getSelectValue()" />
<input type="button" value="设置值为3的选中" onclick="setSelectValue()" />
</div>
<hr />
<div>
<select id="selectDuo" multiple="multiple">
<option value="1">111111</option>
<option value="2">222222</option>
<option value="3">333333</option>
<option value="4">444444</option>
</select>
</div>
<div>
<input type="button" value="获取当前值" onclick="getSelectDuoValue()" />
<input type="button" value="设置值为2,3的选中" onclick="setSelectDuoValue()" />
</div>
</body>
</html>

获取或设置checkbox radio select的值的更多相关文章

  1. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...

  2. struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox

    struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...

  3. checkbox radio select绑定

    index11.html <html><head> <title>checkbox radio select绑定</title> <script ...

  4. .NET Core程序中,如何获取和设置操作系统环境变量的值

    有时候我们在.NET Core程序中需要获取和设置操作系统环境变量的值.本文演示如何使用Environment.GetEnvironmentVariable和Environment.SetEnviro ...

  5. java 中利用反射机制获取和设置实体类的属性值

    摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...

  6. java反射获取和设置实体类的属性值 递归所有父类

    最近做一个通用数据操作接口,需要动态获取和设置实体类的属性值,为了通用实体做了多重继承,开始网上找到代码都不支持父类操作,只能自己搞一个工具类了,此工具类可以设置和获取所有父类属性,代码贴下面拿走不谢 ...

  7. Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关

    常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...

  8. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  9. Jquery 获取 radio/select选中值

    Radio <input type="radio" name="rd" id="rd1" checked="checked& ...

随机推荐

  1. [MySQL优化案例]系列 — slave延迟很大优化方法

    备注:插图来自网络搜索,如果觉得不当还请及时告知 :) 一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以In ...

  2. Stage3D学习笔记(六):旋转动画效果

    我们这节在上一篇代码的基础上再进一步,让显示的纹理进行旋转. 实现旋转,只需要每帧修改_modelViewMatrix的旋转角度即可,我们需要一个变量来记录旋转: //旋转度数 private var ...

  3. matlab color_rain colorbar

    来自http://www.aos.wisc.edu/~dvimont/matlab/Graphics_Tools/color_rain.html Listing of script color_rai ...

  4. sass 使用入门教程

    我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...

  5. cocos2d-x ScrollView、TableView

    转自:http://codingnow.cn/cocos2d-x/1024.html 在游戏和应用中经常要实现左右滑动展示游戏帮助.以列表显示内容的UI效果,就像android中的Gallery和Li ...

  6. 【M19】了解临时对象的来源

    1.首先,确认什么是临时对象.在swap方法中,建立一个对象temp,程序员往往把temp称为临时对象.实际上,temp是个局部对象.C++中所谓的临时对象是不可见的,产生一个non-heap对象,并 ...

  7. 关于Excel Networkdays方法的实现

    最近一个程序要求excel输出的日期差为Networkdays. 在网上找了下,没有找到很好的具体实现方法. 要说明的是,微软的Microsoft.Office.Interop.Excel已经实现的N ...

  8. [Sciter系列] MFC下的Sciter–1.创建工程框架

      Sciter SDK中提供的Win32下例程很多,唯独使用很多(对我个人而言)的MFC框架下Sciter程序的构建讲的很少,虽然MFC有这样那样的诟病,但是不可否认的是编写一般的小项目,这仍然是大 ...

  9. Effective C++ 第二版 17)operator=检查自己 18)接口完整 19)成员和友元函数

    条款17 在operator=中检查给自己赋值的情况 1 2 3 class  X { ... }; X a; a = a;  // a 赋值给自己 >赋值给自己make no sense, 但 ...

  10. memset函数具体说明

    1.void *memset(void *s,int c,size_t n)总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 c. 2.样例#include void main(){char ...