jquery实现全选和取消全选(js全选与取消全选)

http://www.itjxue.com  2023-01-29 08:41  来源:未知  点击次数: 

jquery实现全选 我全选后,取消全选,再点击全选,却选不上。我手动选上,然后点击取消全选,能够取消。

你这样写太费劲,这样写好点:

$().ready(function(){

$("input['name='quanxuan'']").click(function(){

$("input:checkbox[name],#cb_all").attr('checked',$(this).attr('checked'));

});

});

纯手打,可能有字符上的错误。

你问题处在思路上,既然取消全选能生效那就证明你jq版本是支持attr属性的,那么就说下面的问题:

全选和取消全选,使用一个按钮就行,这也是通常都在使用的方法,因为多半人不愿意在全选的状态下再去找‘取消全选’的按钮来实现取消全选的效果。

实现这个效果只需要上述代码:单击全选多选框的时候选中全部多选框,再点就取消全选。

思路就是点击全选按钮的时候把所有的多选框都变成全选按钮的选择状态,反之亦然。

只要全选按钮也是多选框,第一下点,checked是true,这时触发进事件把所有多选框变true,再点全选按钮就变false,这时所有多选框也会边false,你要的效果就实现了。

(纯手打,给分啊~)

jquery全选这样写为什么改变不了选项的状态?

你这样写太费劲,这样写好点:

$().ready(function(){

$("input['name='quanxuan'']").click(function(){

$("input:checkbox[name],#cb_all").attr('checked',$(this).attr('checked'));

});

});

纯手打,可能有字符上的错误。

你问题处在思路上,既然取消全选能生效那就证明你jq版本是支持attr属性的,那么就说下面的问题:

全选和取消全选,使用一个按钮就行,这也是通常都在使用的方法,因为多半人不愿意在全选的状态下再去找‘取消全选’的按钮来实现取消全选的效果。

实现这个效果只需要上述代码:单击全选多选框的时候选中全部多选框,再点就取消全选。

思路就是点击全选按钮的时候把所有的多选框都变成全选按钮的选择状态,反之亦然。

只要全选按钮也是多选框,第一下点,checked是true,这时触发进事件把所有多选框变true,再点全选按钮就变false,这时所有多选框也会边false,你要的效果就实现了。

用jquery怎么实现全选/全不选

方法/步骤

1

HTML代码:

table

tr

tdinput type="checkbox" name="b"全选/tdtd内容/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选1/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选2/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选3/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选4/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选5/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd复选6/td

/tr

/table

2

JAVASCRIPT代码:

script

$("input[name='b']").click(function(){

//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型

if($(this).is(":checked")){

$("input[name='a']").prop("checked",true);

}else{

$("input[name='a']").prop("checked",false);

}

});

/script

Jquery实现复选框全选与全不选

1、首先web项目结构如图所示,这个结构熟悉的话可以自己调整的。

2、然后设置一些较为简单的选项框,这里随便用abcd来代替选项框了。

3、这里是jq来实现全选,所以引入jQuery,并且给按钮绑定一个jQuery类型的点击事件即可。

4、然后通过prop来设置input的属性即可设置全选了,prop是jq自带的一个方法。

5、因为CheckBox可以设置checked属性,所以我们把它设置为true即可。

6、最后预览,可以看到CheckBox都被checked中了,这样就达到全选了。

如何用jQuery实现checkbox全选

全选:

$(":checkbox").attr("checked","checked");

全不选:

$(":checkbox").removeAttr("checked");

反选:

$(":checkbox:checked").removeAttr("checked");

$(":checkbox:not(:checked)").attr("checked","checked");

全手写,没有经过测试。

完整代码如下,测试通过:

html

head

????title如何用jQuery实现checkbox全选/title

????script?src="jquery-1.7.1.min.js"/script

????script?type="text/javascript"

????????//全选,全不选

????????function?allSelect()?{

????????????if?($(":checkbox").attr("checked")?!=?"checked")?{

????????????????$(":checkbox").attr("checked",?"checked");

????????????}

????????????else?{

????????????????$(":checkbox").removeAttr("checked");

????????????}

????????}

????????//反选

????????function?otherSelect()?{

????????????$(":checkbox").each(function?()?{

????????????????if?($(this).attr("checked")?==?"checked")?{

????????????????????$(this).removeAttr("checked");

????????????????}

????????????????else?{

????????????????????$(this).attr("checked",?"checked");

????????????????}

????????????});

????????}

????/script

/head

body

????input?id="Checkbox1"?type="checkbox"?/

????input?id="Checkbox2"?type="checkbox"?/

????input?id="Checkbox3"?type="checkbox"?/

????input?id="Checkbox4"?type="checkbox"?/

????input?id="Checkbox5"?type="checkbox"?/

????input?id="Button1"?type="button"?value="全选"?onclick="allSelect();"?/

????input?id="Button3"?type="button"?value="反选"?onclick="otherSelect();"?/

/body

/html

(责任编辑:IT教学网)

更多