jquery技巧：操作单选框，复选框，下拉列表

1、复选框全选操作：
html代码:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><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 脚本:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->function checkFootball()
{
(" [name='item']:checkbox").each(function () {
if (this.value == 'football')
{
this.checked = true;
}
})
}

注： 具体目的为了解决从后台取出数据，显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值，改用了JavaScript原生的 Dom 方法，将比创建 jQuery对象更有效
2. 单选按钮操作
html代码:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->A B C D 您选择哪一个：<br/>
<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 脚本:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->(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. 下拉框(列表)操作

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><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 脚本:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->(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);
}
}

获得选中的元素

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->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());
}

清空列表

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->function clearOptions()
{
('#choose').empty();
}

出处：http://www.cnblogs.com/zhangsenwei/archive/2009/08/31/1557464.html