用jQuery写的一个小例子，例子参考了博客http://www.cnblogs.com/babycool/p/3302904.html，欢迎吐槽，上例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 操作select radio checkbox</title>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script>
$(function () {
//checkbox获取选中项
$('#checkbox_huoqu').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_div input[type='checkbox']:checked").each(function () {
$('#checkbox_result_div').append(this.value + " ");
});
});
//checkbox全选/取消全选
$('#checkbox_checkall').click(function(){
$("#checkbox_div input[type='checkbox']").prop("checked",$(this).prop("checked"));
});
//checkbox反选
$('#checkbox_fanxuan').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_checkall").removeAttr("checked");
$("#checkbox_div input[type='checkbox']").each(function () {
if ($(this).prop("checked")) {
$(this).removeAttr("checked");
} else {
$(this).prop("checked", 'true');
}
});
});
//选中checkbox第2项的值
$('#checkbox_setvalue').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_checkall").removeAttr("checked");
$("#checkbox_div input[type='checkbox']").removeAttr("checked");
$("#checkbox_div input[type='checkbox'][value='2']").prop("checked","true");
});
//获取select选中的值
$('#select_huoqu').click(function () {
$('#select_result_div').html("");
var checkText=$("#select_id").find("option:selected").text();
var checkValue=$("#select_id").find("option:selected").val(); //获取Select选择的Value
$('#select_result_div').html("select选择的text:"+checkText+" value="+checkValue);
});
//选中select选中的值
$('#select_setvalue').click(function () {
$('#select_result_div').html("");
$("#select_id").val(2);
//$("#select_id option[value='3']").prop("selected", true); //设置Select的Value值为2的项选中
});
//获取radio选中的值
$('#radio_huoqu').click(function () {
$('#radio_result_div').html("");
var checkValue=$("#radio_div input[type='radio']:checked").val(); //获取Select选择的Value
$('#radio_result_div').html("radio选择的value="+checkValue);
});
//选中radio选中的值
$('#radio_setvalue').click(function () {
$('#radio_result_div').html("");
$("#radio_div input[type='radio'][value='2']").prop("checked",true);
});
});
</script>
</head>
<body>
<div id="select_div">
<p>参考了博客：http://www.cnblogs.com/babycool/p/3302904.html</p>
<select id="select_id" placeholder="请选择">
<option value="" disabled selected style='display: none;'>请选择</option>
<option value="1">波音</option>
<option value="2">天宇</option>
<option value="3">苹果</option>
<option value="4">三星</option>
</select>
</div>
<div id="select_oper_div">
<input type="button" id="select_huoqu" value="获取选中项" />
<input type="button" id="select_setvalue" value="选中第2项" />
</div>
<div id="select_result_div"> </div>
<div> </div>
<div> </div>
<div id="checkbox_div">
<input type="checkbox" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
<input type="checkbox" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
<input type="checkbox" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
<input type="checkbox" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
<input type="checkbox" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
<input type="checkbox" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
<input type="checkbox" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
<input type="checkbox" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
</div>
<div id="checkbox_oper_div">
<input type="checkbox" id="checkbox_checkall" /><label for="checkbox_checkall">全选/取消全选</label>
<input type="button" id="checkbox_fanxuan" value="反选" />
<input type="button" id="checkbox_huoqu" value="获取选中项" />
<input type="button" id="checkbox_setvalue" value="选中第2项" />
</div>
<div id="checkbox_result_div"> </div>
<div> </div>
<div> </div>
<div id="radio_div">
<input type="radio" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
<input type="radio" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
<input type="radio" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
<input type="radio" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
<input type="radio" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
<input type="radio" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
<input type="radio" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
<input type="radio" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
</div>
<div id="radio_oper_div">
<input type="button" id="radio_huoqu" value="获取选中项" />
<input type="button" id="radio_setvalue" value="选中第2项" />
</div>
<div id="radio_result_div"> </div>
<div> </div>
<div> </div>
</body>
</html>
全文完。
相关推荐
本篇文章主要是对JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
获取input、checkbox、radio、select的方法有很多，下面本例为大家介绍下根据ID来获取
//事件 当对象text_id获取焦点时触发$(“#text_id”).blur(function(){//code…}); //事件 当对象text_id失去焦点时触发$(“#text_id”).select(); //使文本框的Vlaue值成选中状态$(“input[name=’radio_name’]...
jquery 笔记： 代码如下: $(“input[name=’radio_name’]:checked”).val() <input type=”radio” value=”1″ name=”radio_name” />1 <input type=”radio” value=”2″ name=”radio_name” />2 ...
jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的...
18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组...
下拉复选框基于JQuery的下拉复选框列表（JQuery 1.7.2+） dropdown-checkbox是基于JQuery的下拉复选框列表，用于轻松地将HTML select标签替换为添加的“ multiple”属性，并使用复选框将其转换为下拉列表。...
解决这个问题的办法是将错误信息指定到一个特定的位置，validate()方法的参数中可以进行自定义，示例代码如下: 代码如下: [removed] jQuery.validator.addMethod(“regex”, //addMethod第1个参数:方法名称 function...
支持所有类型客户端控件的校验 支持jQuery所有的选择器语法...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型、日期型。 支持服务器端校验。 支持输入格式的校验。
演示简单的 jQuery animate() 函数。 <script type="text/javascript" src="/jquery/jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box")....
jquery.formstyles.js 为表单元素生成蒙版，以促进跨浏览器的一致样式。 目前与selects和复选框一起使用，可以广播和提交输入。 使用范例 $(function() { $("select").selectstyles(); $('input[type="checkbox"]...
-增加示例(data/tree_select_run.aspx)，如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID，这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...
-增加示例(data/tree_select_run.aspx)，如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID，这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...
jQuery与AngularJS39 苹果与橙子40 窥视未来41 14总结41 第2章构建与测试43 21介绍示例应用44 熟悉问题领域44 技术栈45 持久化存储46 MongoLab46 服务器端环境47 第三方JavaScript库48 BootstrapCSS48 ...
当您想执行ajax但不想使用整个库（如jquery）时...当您执行大量请求时...每一点的开销都会计算在内。 包括并使用所需的内容。 术语 参数=参数 aj = ajax的缩写形式 G = Get的缩写 P = Post的缩写 安装 使用凉亭： ...
{1.11}简单算法}{38}{section.1.11} {1.11.1}打乱算法}{38}{subsection.1.11.1} {1.11.2}排序算法}{38}{subsection.1.11.2} {1.11.2.1}选择排序}{38}{subsubsection.1.11.2.1} {1.11.2.2}冒泡排序}{39}{...
rcSwitcher (Radio Checkbox Switcher) 是一款能够让单选框和复选框转换成开关的 jQuery 插件，它能让你的收音机看起来更加漂亮。 代码示例： // convert all checkboxs to switchs $('input[type=...