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 >
您爱好的运动是:
< 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 即可。
$( ' #checkFootball ' ).click (checkFootball); // 单选足球
});
function checkAll()
{
$( ' input [type="checkbox"][name="item"] ' ).attr ( " checked " , true );
// $('[name="item"]:checkbox').attr("checked", true);
}
选中足球操作
Jquey js 脚本:
function checkFootball()
{
$( " [name='item']:checkbox " ).each(function () {
if ( this .value == ' football ' )
{
this .checked = true ;
}
})
}
注: 具体目的为了解决从后台取出数据,显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值,改用了JavaScript原生的 Dom 方法,将比创建 jQuery对象更有效
{
$( " [name='item']:checkbox " ).each(function () {
if ( this .value == ' football ' )
{
this .checked = true ;
}
})
}
2. 单选按钮操作
html代码:
A B C D 您选择哪一个:
<
br
/>
< 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
< 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 = " 获得字母 " />
Jquey js 脚本:
$(document).ready(function() {
// 数据初始化选择B。
$( ' [name="item"]:radio ' ).each(function() {
if ( this .value == ' B ' )
{
this .checked = true ;
}
});
// 绑定获得字母的事件
$( ' #getLetter ' ).click(getLetter);
});
获得所选中的字母
// 数据初始化选择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. 下拉框(列表)操作
{
alert( ' 获得的字母为: ' + $( ' [name="item"][checked=true]:radio ' ).val());
}
<
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 脚本:
< input id = " addOptions " type = " button " value = " 添加数据 " />
< input id = " getSelectedOption " type = " button " value = " 获得选中的值 " />
< input id = " clearOptions " type = " button " value = " 清空列表 " />
$(document).ready(function() {
$( ' #addOptions ' ).click(addOptions); // 为列表添加元素
$( ' #getSelectedOption ' ).click(getSelectedOption); // 获得选中的元素
$( ' #clearOptions ' ).click(clearOptions); // 清楚列表中的元素
$( ' #addOptions ' ).click(); // 触发为列表添加元素事件
});
追加元素
$( ' #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);
}
}
获得选中的元素
{
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());
}
清空列表
{
/* 逐个弹出每个元素 */
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();
}
{
$( ' #choose ' ).empty();
}