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

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

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

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

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

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

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

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

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

    $(this).select()

})

示例代码如下

创建Html元素

<div class="box">

<span>单击文本框全选文字：</span><br>

<div class="content">

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

</div>

</div>

简单设一下置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

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

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

input[type='text']{width:200pxheight:35pxpadding:5px 10pxborder:1px solid #ff9966}

编写jquery代码

$(function(){

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

$(this).select()

})

})

观察效果

初始状态

点击文本框之后

---