快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

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

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

jquery实现全选,jquery复选框全选

如何用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复选框打勾全选 一个不勾中 则不全选 全勾中则又全选

你的话好绕,

比如你的全选复选框的id是chkAll,其它的单选框包含在id为myDiv的div里面那么以下代码来实现

$('#chkAll').click(function(){

if($(this).attr('checked')){

//选中了全选,下面的全勾中

$('#myDiv').find('checkbox').attr('checked',true);

}else{        

$('#myDiv').find('checkbox').attr('checked',false);

}

});

$('#myDiv').find('checkbox').change(function(){

if($('#myDiv').find('checkbox').not("input:checked").size() = 0){

//如果其它的复选框全部被勾选了,那么全选勾中

$('#chkAll').attr('checked',true);

}else{        

$('#chkAll').attr('checked',false);

}

});

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

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

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

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

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

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

6、最后预览,可以看到CheckBox都被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实现全选,jquery复选框全选
浏览路径:http://6mz.cn/article/dsdhdce.html

其他资讯