用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>
全文完。
相关推荐
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
在本场景中，我们关注的是如何使用jQuery来处理HTML中的复选框（checkbox）元素，尤其是获取选中的值、实现全选、取消全选、反选以及选择奇数行的操作。下面将详细介绍这些知识点。 1. **获取选中的值** jQuery ...
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...
标题和描述中提到的知识点主要涉及使用jQuery根据ID获取不同类型的HTML表单元素，包括input、checkbox、radio和select。这些表单元素是Web页面中常见的用于用户交互的元素，它们可以用来收集用户的数据。获取这些...
在本文中，我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框，包括权限范围的多选、单选以及全选操作。同时，我们也将关注于父级和子级复选框之间的联动关系，即父级选中时子级全部选中，而...
根据提供的文件信息，我们可以总结出一系列关于如何使用 jQuery 来获取不同类型的输入元素（如 radio 按钮、checkbox 和 select 下拉列表）值的方法。接下来，我们将详细地解析这些方法，并提供相应的代码示例。 ##...
jQuery获取Select选择的Text和Value： 语法解释： 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”)...
要获取select元素中被选中的option的值，可以这样： ```javascript var selectedValue = $("#mySelect").val(); console.log(selectedValue); ``` 2. 改变选中项： 用`val()`方法可以改变select的选中项，传入你想...
这可能包括初始化方法（如`.initSelectBox()`)，设置和获取值的方法（如`.setValue()`, `.getValue()`），以及显示和隐藏下拉框的方法（如`.show()`, `.hide()`）。 6. **可访问性和兼容性**：考虑到不同的浏览器和...
jQuery作为一种流行的JavaScript库，极大地简化了DOM操作的过程，使得处理`<select>`元素变得简单高效。本文档汇总了一系列关于如何使用jQuery来操作`<select>`元素及其`<option>`子元素的方法，旨在为前端开发者...
总结，使用jQuery处理radio、checkbox和select的选中状态及获取选中值是非常常见的操作。理解并熟练运用这些API可以帮助我们更高效地实现页面交互功能。在实际开发中，需要注意选择器的准确性和效率，以及考虑到各种...
### 知识点详解 ...以上内容总结了通过jQuery获取和操作Radio、CheckBox以及文本框Value值的基本方法。这些操作对于处理表单数据和用户交互非常有用，而且示例代码也方便读者理解和实际应用这些知识点。
### JQuery 获取 Table 一列值的方法详解 在 Web 开发中，经常需要处理表格数据，尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格（`<table>`）中某一列的所有值。下面将详细介绍...
这段代码首先获取了页面上所有的 `checkBox`，然后在 `selectAll` 被点击时，更新这些 `checkBox` 的 `checked` 属性。 在提到的 `jquery` 文件中，我们可以看到jQuery库的引用。jQuery是一个流行的JavaScript库，...
在前端开发中，经常需要操作表单元素（如文本框、单选按钮、复选框和下拉选择框等），而jQuery提供了一套简单易用的方法来获取和设置这些表单元素的值。 1. 获取表单元素的值 在表单中，获取元素的值是常见的需求。...
2. **获取选择值**：在JavaScript中，可以使用 `value` 属性获取用户所选的 `option` 的值，如 `document.getElementById('selectId').value`。 3. **添加/删除选项**：动态添加或删除 `option`，可以使用 `add()` ...