欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery 操作单选框,复选框,下拉列表实现代码_jquery

程序员文章站 2022-04-25 13:53:42
...
1、复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器
html代码:
复制代码 代码如下:


您爱好的运动是:
football
basketball
badminton
pingpong




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 您选择哪一个:
A
B
C
D


初始化选中字母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. 下拉框(列表)操作
复制代码 代码如下:






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