JS实现Checkbox全选反选-优快云博客

本文链接：https://blog.youkuaiyun.com/cg20/article/details/78141317

本文介绍了一种使用JavaScript实现网页中Checkbox全选及反选功能的方法。通过一个简单的函数，可以快速地对页面上所有的Checkbox进行状态切换，极大地提高了用户在需要批量操作时的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天这篇文章主要是介绍如何使用js来实现checkbox全选反选的操作。

一般用到全选反选的地方，都是需要批量操作的。

一个一个的选择，效率肯定会很低。

所以全选或反选在这时候就很有用了。

来看看下面的实例代码。

    <script>
    function selectall(divid){
    	var divselect=get_obj(divid);
    	var cbx=divselect.getElementsByTagName("input");
    	for(var i=0;i<cbx.length;i++){
    		if(!cbx[i].checked)
    			cbx[i].checked = true;    
    		else
    			cbx[i].checked = false;
    	}
    }
    </script>

    <table border="1">
        <tr class="trbg">
            <td>
            	<input type="checkbox" name="select" onclick="selectall('divlist');" />全选
            </td>
            <td>事件名字</td>
    	</tr>
        <tbody id="divlist">
            <tr>
                <td>
                <input type="checkbox" name="select[]" value="1" />
                </td>
                <td>javascript click单击事件</td>
            </tr>
            <tr>
                <td>
                <input type="checkbox" name="select[]" value="2" />
                </td>
                <td>javascript blur单击事件</td>
            </tr>
            <tr>
                <td>
                <input type="checkbox" name="select[]" value="2" />
                </td>
                <td>javascript keyup单击事件</td>
            </tr>
            <tr>
                <td>
                <input type="checkbox" name="select[]" value="2" />
                </td>
                <td>javascript keydown单击事件</td>
            </tr>
        </tbody>
    </table>

js实现全选反选实例代码