符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
1、首先web项目结构如图所示,这个结构熟悉的话可以自己调整的。
创新互联从2013年成立,先为昌江等服务建站,昌江等地企业,进行企业商务咨询服务。为昌江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
2、然后设置一些较为简单的选项框,这里随便用abcd来代替选项框了。
3、这里是jq来实现全选,所以引入jQuery,并且给按钮绑定一个jQuery类型的点击事件即可。
4、然后通过prop来设置input的属性即可设置全选了,prop是jq自带的一个方法。
5、因为CheckBox可以设置checked属性,所以我们把它设置为true即可。
6、最后预览,可以看到CheckBox都被checked中了,这样就达到全选了。
全选:
$(":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中的attr方法会当做一个其实属性设置值的,
不会对原生的
checked设置值。
所以你要做的是使用原生的方法来让它全选和取消全选。
这个问题我之前遇到过。
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
这样就实现了全选和全不选。
你这样写太费劲,这样写好点:
$().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代码可以实现点击文本框即全选其文字的效果:
$("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();
})
})
观察效果
初始状态
点击文本框之后