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

 

 

 

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

转载于:https://www.cnblogs.com/steven-snow/p/7561474.html