给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习推荐的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" value="全选"/
input type="button" 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 ( == football)
{
= 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" value="获得字母 "/
初始化选中字母B
Jquey js 脚本:
代码如下:
$(document).ready(function() {
// 数据初始化选择B。
$([name="item"]:radio).each(function() {
if ( == B)
{
= true;
}
});
// 绑定获得字母的事件
$(#getLetter).click(getLetter);
});
获得所选中的字母
Jquey js 脚本:
代码如下:
function getLetter()
{
alert(获得的字母为： + $([name="item"][checked=true]:radio).val());
}
3. 下拉框(列表)操作
代码如下:
select multiple/select
input type="button" value="添加数据"/
input type="button" value="获得选中的值"/
input 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);
();
}
}
获得选中的元素
代码如下:
function getSelectedOption()
{
/* 逐个弹出每个元素 */
var options = $(#choose );
$.each(options, function () {
alert(option: + );
});
/* 逐个弹出每个元素，第一种的简写 */
$(#choose ).each(function() {
alert(option2: + );
});
// 直接弹出数据， 如果是对下拉框，则直接弹出数据，如果是列表并且选择了多个数
// 据，将数据以，分隔显示
alert(val: + $(#choose).val());
}
清空列表
代码如下:
function clearOptions()
{
$(#choose).empty();
}
常用的：
代码如下:
var ddl = $("#ddlDiaryType ").text();//下拉别表
var reb = $("#RbIfprivate [checked=true]:radio").val();//单选框
