几乎所有我已创建的用户界面有此功能处理或删除它们从列表中选择多个项目。虽然它很容易在JavaScript中实现这一功能,使用jQuery,这是真正的乐趣。我会告诉你一个简单的实现多个复选框选择和取消选择的功能添加到任何网页。我们将有一个表,并在每一行的复选框中的一些数据。会有一个选择都在表头的复选框。如果用户选择/取消全选“复选框,将得到表中的所有复选框选中或取消相应。现在还有一件事,我们想在这里补充的是,假设用户选择所有的复选框,然后全选“复选框应该自动被选中。如果用户单击“全选第一个,然后取消选中任何复选框,然后全选也应该选中自动。
<
HTML
>
<
HEAD
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
></
script
>
<
TITLE
>Multiple Checkbox Select/Deselect - DEMO</
TITLE
>
</
HEAD
>
<
BODY
>
<
H2
>Multiple Checkbox Select/Deselect - DEMO</
H2
>
<
table
border
=
"1"
>
<
tr
>
<
th
><
input
type
=
"checkbox"
id
=
"selectall"
/></
th
>
<
th
>Cell phone</
th
>
<
th
>Rating</
th
>
</
tr
>
<
tr
>
<
td
align
=
"center"
><
input
type
=
"checkbox"
class
=
"case"
name
=
"case"
value
=
"1"
/></
td
>
<
td
>BlackBerry Bold 9650</
td
>
<
td
>2/5</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
><
input
type
=
"checkbox"
class
=
"case"
name
=
"case"
value
=
"2"
/></
td
>
<
td
>Samsung Galaxy</
td
>
<
td
>3.5/5</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
><
input
type
=
"checkbox"
class
=
"case"
name
=
"case"
value
=
"3"
/></
td
>
<
td
>Droid X</
td
>
<
td
>4.5/5</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
><
input
type
=
"checkbox"
class
=
"case"
name
=
"case"
value
=
"4"
/></
td
>
<
td
>HTC Desire</
td
>
<
td
>3/5</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
><
input
type
=
"checkbox"
class
=
"case"
name
=
"case"
value
=
"5"
/></
td
>
<
td
>Apple iPhone 4</
td
>
<
td
>5/5</
td
>
</
tr
>
</
table
>
</
BODY
>
</
HTML
>
jQuery代码
加入后,在头上面的HTML部分中的jQuery代码
<SCRIPT language=
"javascript"
>
$(
function
(){
$(
"#selectall"
).click(
function
() {
$(
'.case'
).attr(
'checked'
,
this
.checked);
});
$(
".case"
).click(
function
(){
if
($(
".case"
).length == $(
".case:checked"
).length)
{
$(
"#selectall"
).attr(
"checked"
,
"checked"
);
}
else
{
$(
"#selectall"
).removeAttr(
"checked"
);
}
});
});
</SCRIPT>
在这里,我们在上面的代码行05注册处理程序上单击“全选”复选框。点击这个复选框,我们检查/取消所有复选框中的DataTable。
分享到:
相关推荐
jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件
一个js的方法,调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法: * (1)调用js函数:setSelectBox(textItem, myArray); *...
主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下
jquery特效制作复选框,全选,反选,取消,购物车,统计价格,统计
jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
web前端插件+下拉多选复选框,可用于后台多选数据,前端也可以使用,插件可以二开也可以
jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态
这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一...
jquery版本的复选框全选和不选,简单而且好用,我是在项目中摘要出来的小示例。
jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值
jquery实现 复选框 选中和不选中 美化复选框
带有演示数据,jquery无限极复选框下拉树,父级全选,子级单选都可以。
jQuery添加购物车复选框是一款基于jquery制作的复选框全选反选取消,购物车,统计价格,统计,类似淘宝的购物车,非常不错的。
jQuery复选框美化、单选按钮美化,个人感觉挺漂亮
但是最近公司需要做一个带复选框的树形结构,并且最关键的是要嵌入到JSP页面中,传递的数据不是用JSON传递的,是直接通过后端跳JSP页面的方式来的,所以就没有用网上的插件,就自己写了一下简单的实现。
jQuery单选框和复选框美化演示代码,改改就能用,效果比普通单选框复选框高大上
highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能,子节点会在点击时才去加载数据。
jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码