网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

jquery全选,jquery全选和全不选效果

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

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

创新互联从2013年成立,先为昌江等服务建站,昌江等地企业,进行企业商务咨询服务。为昌江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

jquery 全选和取消只能执行一次 为什么呢?

是这样的,

jQuery中的attr方法会当做一个其实属性设置值的,

不会对原生的

checked设置值。

所以你要做的是使用原生的方法来让它全选和取消全选。

这个问题我之前遇到过。

怎么用jquery通过点击全选按钮实现全选?

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

/table

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

3

这样就实现了全选和全不选。

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实现全选text里的文字

下面的jquery代码可以实现点击文本框即全选其文字的效果:

$("input:text").click(function(){ 

$(this).select();

});

示例代码如下

创建Html元素

div class="box"

span单击文本框全选文字:/spanbr

div class="content"

input type="text" value="单击即可全选文字"

/div

/div

简单设一下置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.box span{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:200px;height:35px;padding:5px 10px;border:1px solid #ff9966;}

编写jquery代码

$(function(){

$(":text").click(function() {

$(this).select();

})

})

观察效果

初始状态

点击文本框之后


本文名称:jquery全选,jquery全选和全不选效果
文章位置:http://bjjierui.cn/article/dscghcc.html

其他资讯