js全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <input type="checkbox" name="checkboxs" id="" value="咕咕" />咕咕<br>
            <input type="checkbox" name="checkboxs" id="" value="嘎嘎" />嘎嘎<br>
            <input type="checkbox" name="checkboxs" id="" value="嘟嘟" />嘟嘟<br>
            <input type="button" id="quanxuan" value="全选" />
            <input type="button" id="quanbuxuan" value="全不选" />
            <input type="button" id="fanxuan" value="反选" />
        </div>
        <script type="text/javascript">
            var checkboxs = document.getElementsByName("checkboxs");

            document.getElementById("quanxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = true;
                }
            }
            document.getElementById("quanbuxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = false;
                }
            }
            document.getElementById("fanxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = !checkboxs[i].checked;
                }
            }

        </script>
    </body>
</html>

原文地址:https://www.cnblogs.com/qilin20/p/12655447.html

时间: 2024-07-31 10:16:22

js全选反选的相关文章

JS 全选反选功能

全选按钮:<input type=\"checkbox\" id=\"cheSelectAll\" />选择</li>"); 选择项:<input name=\"chkItem\" type=\"checkbox\" value=\"" + this.ID + "\" /> //全选反选 $("#cheSelectAll"

js全选 反选

// 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name", allSelection: true, invertSelection: true }, o); var $id; if (obj.id.substring(1) === "#") { $id = obj.id; } else { $id = "#" +

关于js 全选 反选

prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. attr 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. $("#selectAll").click(function () { //全选 if ($(this).is(':checked')) { $(".reseller_checkbox:checkbox").prop("checked", true); } else { $("

js 全选 反选

1.全选 1 function selectAll(form){ 2 for (var i = 0; i < form.elements.length; i++) { 3 if (form.elements[i].type=="checkbox") { 4 try{ 5 $(form.elements[i]).check("option", "checked", true); 6 }catch(e){ 7 console.log(e); 8

js全选反选按钮实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> </title></head><body><form action=""> <p><input type="checkbox" >我是谁</p> &

全选反选取消-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

简单JS全选、反选代码

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Cont

Js全选、反选

Js全癣反选,挺常用的功能,大多数的WEB管理系统.后台管理基本上都具备这一功能,但是有很多朋友或许对此类JS的使用并不熟悉,重新分享一款JS全癣反癣清除的功能,供你使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

js实现全选反选

在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>快递</th> <th>