1、首先web项目结构如图所示，这个结构熟悉的话可以自己调整的。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、雅安服务器托管、营销软件、网站建设、安龙网站维护、网站推广。
2、然后设置一些较为简单的选项框，这里随便用abcd来代替选项框了。
3、这里是jq来实现全选，所以引入jQuery，并且给按钮绑定一个jQuery类型的点击事件即可。
4、然后通过prop来设置input的属性即可设置全选了，prop是jq自带的一个方法。
5、因为CheckBox可以设置checked属性，所以我们把它设置为true即可。
6、最后预览，可以看到CheckBox都被checked中了，这样就达到全选了。
用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代码可以实现点击文本框即全选其文字的效果：
$("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();
})
})
观察效果
初始状态
点击文本框之后
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
这样就实现了全选和全不选。
