我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

全选jquery,全选快捷键ctrl加A然后怎么做

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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、雅安服务器托管、营销软件、网站建设、安龙网站维护、网站推广。

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

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

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

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

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

用JQuery实现全选与取消的两种简单方法

用JQUERY实现全选和取消全选,没有js那么繁琐,而且支持更多浏览器。

复制代码

代码如下:

mce:script

type="text/javascript"!--

$(function()

{

$("#checkall").click(function()

{

$("input[@name='checkname[]']").each(function()

{

$(this).attr("checked",

true);

});

});

$("#delcheckall").click(function()

{

$("input[@name='checkname[]']").each(function()

{

$(this).attr("checked",

false);

});

});

});

//

--/mce:script

input

type='checkbox'

id='id1'

name='checkname[]'

value='1'

/value1

input

type='checkbox'

id='id2'

name='checkname[]'

value='2'

/value2

input

type='checkbox'

id='id3'

name='checkname[]'

value='3'

/value3

input

type="button"

id="checkall"

name="checkall"

value="全选"

/

input

type="button"

id="delcheckall"

name="delcheckall"

value="取消全选"

/

更加简单的一种:

复制代码

代码如下:

$("#checkall").click(

function(){

if(this.checked){

$("input[name='checkname']").attr('checked',

true)

}else{

$("input[name='checkname']").attr('checked',

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通过点击全选按钮实现全选?

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,全选快捷键ctrl加A然后怎么做
转载注明:http://mswzjz.cn/article/dsehded.html

其他资讯