首页 / 脚本样式 / JavaScript / jquery 操作单选框，复选框，下拉列表实现代码

1、复选框全选操作：其实说到底就是对Jquery 选择器的运用，点我查看Jquery选择器
html代码:
复制代码 代码如下:
<form>
您爱好的运动是：
<input type="checkbox" name="item" value="football"/> football
<input type="checkbox" name="item" value="basketball"/> basketball
<input type="checkbox" name="item" value="badminton"/> badminton
<input type="checkbox" name="item" value="pingpong"/> pingpong
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkFootball" value="选中足球"/>
</form>

Jquey js 脚本:
复制代码 代码如下:
$（"#checkAll"）.click （checkAll）; // 全选
$（"#checkFootball"）.click （checkFootball）; // 单选足球
}）;
function checkAll（）
{
$（"input [type="checkbox"][name="item"]"）.attr （"checked", true）;
// $（"[name="item"]:checkbox"）.attr（"checked", true）;
}

注： 全反选只需要将这里的 true 换成 false 即可。
选中足球操作
Jquey js 脚本:
复制代码 代码如下:
function checkFootball（）
{
$（" [name="item"]:checkbox"）.each（function （） {
if （this.value == "football"）
{
this.checked = true;
}
}）
}

注： 具体目的为了解决从后台取出数据，显示。这里并没有用jQuery的attr（）和val（）方法来设置选中和获得当前checkbox的值，改用了JavaScript原生的 Dom 方法，将比创建 jQuery对象更有效
2. 单选按钮操作
html代码:
复制代码 代码如下:
A B C D 您选择哪一个：
<input type="radio" name="item" value="A"/>A
<input type="radio" name="item" value="B"/>B
<input type="radio" name="item" value="C"/>C
<input type="radio" name="item" value="D"/>D
<input type="button" id="getLetter" value="获得字母 "/>

初始化选中字母B
Jquey js 脚本:
复制代码 代码如下:
$（document）.ready（function（） {
// 数据初始化选择B。
$（"[name="item"]:radio"）.each（function（） {
if （this.value == "B"）
{
this.checked = true;
}
}）;
// 绑定获得字母的事件
$（"#getLetter"）.click（getLetter）;
}）;

获得所选中的字母
Jquey js 脚本:
复制代码 代码如下:
function getLetter（）
{
alert（"获得的字母为：" + $（"[name="item"][checked=true]:radio"）.val（））;
}

3. 下拉框（列表）操作
复制代码 代码如下:
<select multiple id="choose" style="width=100px;heigth=160px"></select>
<input id="addOptions" type="button" value="添加数据"/>
<input id="getSelectedOption" type="button" value="获得选中的值"/>
<input id="clearOptions" type="button" value="清空列表"/>

Jquey js 脚本:
复制代码 代码如下:
$（document）.ready（function（） {
$（"#addOptions"）.click（addOptions）; // 为列表添加元素
$（"#getSelectedOption"）.click（getSelectedOption）; // 获得选中的元素
$（"#clearOptions"）.click（clearOptions）; // 清楚列表中的元素
$（"#addOptions"）.click（）; // 触发为列表添加元素事件
}）;

追加元素
Jquey js 脚本:
复制代码 代码如下:
function addOptions（）
{
var selectContainer = $（"#choose"）;
for （var i = 0; i < 5; i++）
{
var option = $（"<option></option>"）.text（"choose" + i）.val（i）;
selectContainer.append（option）;
}
}

获得选中的元素
复制代码 代码如下:
function getSelectedOption（）
{
/* 逐个弹出每个元素 */
var options = $（"#choose > option:selected"）;
$.each（options, function （） {
alert（"option: " + this.value）;
}）;
/* 逐个弹出每个元素，第一种的简写 */
$（"#choose > option:selected"）.each（function（） {
alert（"option2: " + this.value）;
}）;
// 直接弹出数据， 如果是对下拉框，则直接弹出数据，如果是列表并且选择了多个数
// 据，将数据以"，"分隔显示
alert（"val: " + $（"#choose"）.val（））;
}

清空列表
复制代码 代码如下:
function clearOptions（）
{
$（"#choose"）.empty（）;
}

常用的：
复制代码 代码如下:
var ddl = $（"#ddlDiaryType option:selected"）.text（）;//下拉别表
var reb = $（"#RbIfprivate [checked=true]:radio"）.val（）;//单选框