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();//单选框
分享到:
相关推荐
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法
该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选。 ...
$("#kw").val("jQuery"); //在输入框输入jQuery进行搜索 $("#su").click();...//更多jQuery功能请自行搜索...//jquery 操作单选框,复选框,下拉列表 http://www.cnblogs.com/zhangsenwei/archive/2009/08/31/1557464.html
一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....
小型插件,用于将选择/多选转换为带有更改事件和观察器的单选输入/复选框输入列表,以动态添加标记 特征 将任何常规选择转换为单选输入列表 将任何多选转换为复选框输入列表 添加下拉功能 添加内联搜索以获取长列表 ...
复选框.htm 表单复选框的用法。 密码框.htm 表单密码框的用法。 文本框.htm 表单文本框的用法。 文本域.htm 表单文本域用法。 下拉表.htm 表单下拉表的用法。 表单实例手把手....
下拉列表组合框多选SelectList(复选框和单选组) 日期时间选择器日历号码选择器演示和文档迁移:2.0 可以在找到迁移指南安装npm install react-widgets 构建本地文档文档是托管在 gh-pages 上的简单 React 应用...