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" />

</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" />

初始化选中字母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 />

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();//单选框

转载：http://www.jb51.net/article/20627.htm