js小效果----全选和反选

从今天开始，就开始写文章了，记录一下自己的学习过程。每天记录一个小的技巧，加深学习印象。

今天写一个全选反选的小js效果，希望能对初学的朋友有所帮助，我的也是初学，有不对的地方望留言指教！

Document

首先，我们在页面写出我们需要的div结构，很简单，首先就是两个checkbox，一个全选，一个反选;

用来做选择；

然后建立一个div，给加个盒子，并命名id，利用它来找我们要操作的checkbox；

这样，我们的demo就建好了；

<input type="checkbox" id='checkAll' name="qx"/><label for=" checkAll ">全选</label>

<input type="checkbox" id=' checkInvert' name="checkInvert" /><label for=" checkInvert">反选</label>

<div class="checkbox" id="checkboxContainer"><br><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

</div>

下面我们来写js代码，代码也很简单；

<script>

var checkAll = document.getElementById('checkAll');//找到这个全选按钮

var checkInvert = document.getElementById('checkInvert');//找到这个反选按钮

var checkbox = document.getElementById('checkboxContainer').getElementsByTagName('input');//找到所有的盒子里面的checkbox

首先，我们先建立script标签；然后呢，我们找到全选、反选按钮，和我们的checkbox；就像你要找一个女孩儿，先要告诉人家名字嘛！

然后呢。下面我们就要对他们进行嘿嘿嘿了。

//全选事件

checkAll.onclick = function(){

        //我们先给按钮一个点击事件，然后建立一个for循环，找到所有的盒子下的input，在循环内部，我们就可以让盒子内部的checkbox的选中值等于我们全选按钮的选种值；

       //这样，我们就完成了全选。

        for(var i=0;i<checkbox.length;i++){

        checkbox[i].checked = qx.checked;

         checkInvert.checked = false;//还没完，这句话是什么意思呢?

        //这是为了防止你点击了全选按钮，又去点击反选的时候，发现，全选按钮还在点击状态不信你去掉点击试试看

}

}

        //同理，我们来完成反选；反选就是给我们的盒子下面的所有checkbox一个相反的chebox选中的值就可以了。

       //注意，这里不是反选按钮相反的值，而是同样的所有checkbox的相反的值

checkInvert.onclick = function(){

for(var i=0;i<checkbox.length;i++){

        checkbox[i].checked = !checkbox[i].checked;

         checkAll.checked =false;//这里和全选一样，是为了点击反选按钮而出现的全选按钮选中的小bug；

}

}

</script>

到此，我们就完成了一个简单的全选反选的小js效果，是不是很简单呢；哈哈；期待我的文章能对你有所帮助；让我们共同进步！！！