精华内容
下载资源
问答
  • 效果图: 源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选练习<...script type="text/javascript"> window.onload = function(){

    效果图:
    在这里插入图片描述
    源码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>全选练习</title>
            <script type="text/javascript">
                window.onload = function(){
                    
                    var items = document.getElementsByName("items");
                    var checkedAllBox = document.getElementById("checkedAllBox");
                    var checkedAllBtn = document.getElementById("checkedAllBtn");
                    var checkedNoBtn = document.getElementById("checkedNoBtn");
                    var checkedRevBtn = document.getElementById("checkedRevBtn");
                    var sendBtn = document.getElementById("sendBtn");
    
                    //检查上方复选框状态的方法
                    var ch = function(){
                        if (items[0].checked && items[1].checked
                            && items[2].checked && items[3].checked){
                            checkedAllBox.checked = true;
                        }else{
                            checkedAllBox.checked = false;
                        }
                    };
                    
                    //全选
                    checkedAllBtn.onclick = function(){
                        // console.log(items);
                        for(var i=0; i<items.length; i++){
                            items[i].checked = true;
                        }
                        checkedAllBox.checked = true;
                    };
    
                    //全不选
                    checkedNoBtn.onclick = function(){
                        for(var i=0; i<items.length; i++){
                            items[i].checked = false;
                        }
                        checkedAllBox.checked = false;
                    };
                    
                    //反选
                    checkedRevBtn.onclick = function(){
                        for(var i=0; i<items.length; i++){
                            items[i].checked = !items[i].checked;
                        }
                        //执行反选后,上方复选框的状态
                        ch();
                    };
    
                    //提交
                    sendBtn.onclick = function(){
                        for(var i=0; i<items.length; i++){
                            if(items[i].checked){
                                alert(items[i].value);
                            }
                        }
                    };
                    
                    //复选框全选/全不选
                    checkedAllBox.onclick = function(){
                        for(var i=0; i<items.length; i++){
                            items[i].checked = this.checked;
                        }
                    }
    
                    //四个复选框的单击事件
                    items[0].onclick = function(){
                        ch();
                    }
                    items[1].onclick = function(){
                        ch();
                    }
                    items[2].onclick = function(){
                        ch();
                    }
                    items[3].onclick = function(){
                        ch();
                    }
                };
            </script>
        </head>
        <body>
            <form method="psot" action="">
                你爱好的运动是?<input type="checkbox" id="checkedAllBox">全选/全不选
                <br />
                <input type="checkbox" name="items" value="足球">足球
                <input type="checkbox" name="items" value="篮球">篮球
                <input type="checkbox" name="items" value="羽毛球">羽毛球
                <input type="checkbox" name="items" value="乒乓球">乒乓球
                <br />
                <input type="button" value="全  选" id="checkedAllBtn">
                <input type="button" value="全不选" id="checkedNoBtn">
                <input type="button" value="反  选" id="checkedRevBtn">
                <input type="button" value="提  交" id="sendBtn">
            </form>
        </body>
    </html>
    

    注:B站尚硅谷李立超老师的教程中有该练习,如有疑问可去参考视频(https://www.bilibili.com/video/BV1YW411T7GX?p=98)

    展开全文
  • 例如,如果您使用复选框来允许用户设置特定于站点的首选项,例如在新窗口中打开外部链接或隐藏某些页面元素,则对于“保持复选框选中状态”可能很有用。 对于您当中不耐烦的人,本文结尾处提供了该技术的演示 ...

    js动态加载复选框

    此快速提示介绍了刷新页面或用户离开您的站点以在以后返回时如何使浏览器记住复选框的状态。

    例如,如果您使用复选框来允许用户设置特定于站点的首选项,例如在新窗口中打开外部链接或隐藏某些页面元素,则对于“保持复选框的选中状态”可能很有用。

    对于您当中不耐烦的人,本文结尾处提供了该技术的演示

    复选框标记

    因此,我们首先需要的是一些复选框。 这是我之前做的一些:

    <div id="checkbox-container">
      <div>
        <label for="option1">Option 1</label>
        <input type="checkbox" id="option1">
      </div>
      <div>
        <label for="option2">Option 2</label>
        <input type="checkbox" id="option2">
      </div>
      <div>
        <label for="option3">Option 3</label>
        <input type="checkbox" id="option3">
      </div>
    
      <button>Check All</button>
    </div>

    您会注意到,我包括了“ 全部选中”按钮,允许用户单击一下即可选择或取消选择所有框。 我们稍后再讨论。

    希望您还会注意到,我在与每个框有关的文本中使用标签。 不言而喻, 表单域仍然应该具有标签 ,但是对于复选框而言,这尤其重要,因为它允许用户通过单击标签文本来选择/取消选择该框。

    最后,您将看到我将标签和复选框分组在块级元素(在本例中为<div>元素)内,以便它们彼此之间出现并且更易于样式化。

    应对变化

    现在,让我们将事件处理程序绑定到复选框,以便在单击它们时发生某些事情。 我在本教程中使用的是jQuery ,但是,当然,这并非绝对必要。 您可以通过CDN包含它,因此:

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    现在JavaScript:

    $("#checkbox-container :checkbox").on("change", function(){
      alert("The checkbox with the ID '" + this.id + "' changed");
    });

    在这里,我使用的是jQuery的psuedo-class :checkbox选择器 ,其前面是包含<div>元素的ID( checkbox-container )。 这样,我就可以仅定位我感兴趣的那些复选框,而不是页面上的所有复选框。

    坚持复选框选中状态

    如您所知,HTTP是无状态协议 。 这意味着它将每个请求视为与任何先前请求均无关的独立事务。 因此,如果您选中一个复选框然后刷新页面,浏览器将无法记住该复选框的先前状态,并且在上面的示例中, 浏览器将以未选中的形式呈现该复选框(尽管某些浏览器会缓存该值 )。

    为了避免这种情况,我们将使用本地存储(这是Web Storage API的一部分 )将复选框状态存储在用户的计算机上。 它具有相当不错的浏览器支持:

    我可以使用名称值存储吗? 来自caniuse.com的有关主要浏览器对namevalue-storage功能的支持的数据。

    要在JavaScript中修改localStorage对象,可以使用setItemgetItem方法:

    localStorage.setItem("favoriteVillan", "Dr. Hannibal Lecter");
    
    console.log(localStorage.getItem("favoriteVillan"));
    => Dr. Hannibal Lecter

    要从本地存储中删除项目,请使用removeItem方法。

    localStorage.removeItem("favoriteVillan");
    
    console.log(localStorage.getItem("favoriteVillan"));
    => null

    您可以在此处阅读有关本地存储的更多信息: HTML5 Web存储

    对于我们的代码,似乎当我们要保留所有复选框时,逻辑上的选择是使键/值对包含复选框ID及其对应的选中状态。 我们可以将它们保存在对象文字中,然后可以将其添加到本地存储中。 但是,由于本地存储只能处理键/值对,因此我们需要在存储对象之前对其进行字符串化,并在检索时对其进行解析。

    让我们看看我们该怎么做:

    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
    var $checkboxes = $("#checkbox-container :checkbox");
    
    $checkboxes.on("change", function(){
      $checkboxes.each(function(){
        checkboxValues[this.id] = this.checked;
      });
      localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });

    免费学习PHP!

    全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

    原价$ 11.95 您的完全免费

    请注意,如果第一个操作数为假,则逻辑OR运算符( || )返回其第二个操作数的值。 如果在本地存储中找不到任何条目,我们将使用它来为checkboxValues变量分配一个空对象。 这实际上与编写相同:

    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues');
    if (checkboxValues === null){
      checkboxValues = {};
    }

    还要注意,我们正在缓存对复选框的引用,因此我们不必继续查询DOM。 在这么小的例子中,这是过分的,但是随着代码的增长,这是一个很好的习惯。

    最后要做的是在页面加载时遍历checkboxValues变量,并相应地设置框的值:

    $.each(checkboxValues, function(key, value) {
      $("#" + key).prop('checked', value);
    });

    就是这样。 现在,我们有了持久的复选框。

    请参阅CodePen上的SitePoint( @SitePoint )提供的Pen xVevNw

    如果尝试刷新密码笔(通过单击“ 重新运行”按钮),则会看到该复选框保持选中状态,而如果您在文本输入中输入内容,则在重新加载时将消失。

    选中和取消选中所有框

    为了解决这个问题,让我们实现“ 全部检查”按钮,以便用户可以一次性选择或取消选择所有内容。

    单击时,此按钮应选中所有复选框。 选中所有复选框后,其文本应更改为全部取消选中 ,其状态也应存储在本地存储中。

    让我们开始这样:

    var $button = $("#checkbox-container button");
    
    function allChecked(){
      return $checkboxes.length === $checkboxes.filter(":checked").length;
    }
    
    function updateButtonStatus(){
      $button.text(allChecked()? "Uncheck all" : "Check all");
    }
    
    $checkboxes.on("change", function(){
      ...
      updateButtonStatus();
    });

    当所有复选框都处于选中或未选中状态时,这将导致按钮的文本更改。

    唯一可能有点不寻常的是,在updateButtonStatus方法中使用三元条件 。 这是if语句的快捷方式,等效于:

    if(allChecked()){
      $button.text("Uncheck all");
    } else {
      $button.text("Check all");
    }

    现在是执行选择和取消选择的功能:

    function handleButtonClick(){
      $checkboxes.prop("checked", allChecked()? false : true)
    }
    
    $("button").on("click", function() {
      handleButtonClick();
    });

    最后,我们将向本地存储中的对象添加一个新值,我将其重命名以反映它现在存储了不同类型的值的事实。 我还将更新本地存储的逻辑移到了自己的函数中:

    var formValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
    
    function updateStorage(){
      $checkboxes.each(function(){
        formValues[this.id] = this.checked;
      });
    
      formValues["buttonText"] = $button.text();
      localStorage.setItem("formValues", JSON.stringify(formValues));
    }

    并在页面加载:

    $button.text(formValues["buttonText"]);

    演示版

    这就是我们最终得到的结果。

    请参阅CodePen上的SitePoint( @SitePoint )手写笔grJYvd

    结论

    在本教程中,我演示了如何将表单值持久保存到本地存储,以及如何以简单的形式实现复选框的Check / Uncheck All功能。

    如果您有任何问题或意见,我们很高兴在下面听到。

    翻译自: https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/

    js动态加载复选框

    展开全文
  • JS方法:box.checked==true,即当前复选框选中状态。 jQuery方法: 第一种方法: $("#test1").prop(“checked”); 第二种方法: $("#test1").is(":checked");选中状态为true,未选中状态都是false。 练习 全选反选 ...

    JS方法:box.checked==true,即当前复选框为选中状态。
    jQuery方法:
    第一种方法: $("#test1").prop(“checked”);
    第二种方法: $("#test1").is(":checked");选中状态为true,未选中状态都是false。
    练习 全选反选 案例

    <input type="checkbox" onclick="selectAll(this)">全选
    <div id="checkAll">
    <input type="checkbox">1
    <input type="checkbox">2
    <input type="checkbox">3
    <input type="checkbox">4
    <input type="checkbox">5
    <input type="checkbox">6
    <input type="checkbox">7<br>
    <a onclick="selectReverse()" style="text-decoration:none;cursor:pointer;">反选</a>
    </div>
    <script>
    function selectAll(box){
    	var checkAll=document.getElementById("checkAll").children;
    	for(var i=0;i<checkAll.length;i++){
    		if(box.checked==true){
    			checkAll[i].checked=true;
    		}else{
    			checkAll[i].checked=false;
    		}
    	}
    }
    function selectReverse(){
    	var checkAll=document.getElementById("checkAll").children;
    	for(var i=0;i<checkAll.length;i++){
    		if(checkAll[i].checked==true){
    			checkAll[i].checked=false;
    		}else{
    			checkAll[i].checked=true;
    		}
    	}
    }
    </script>
    
    
    展开全文
  • javascript判断checkbox是否选中的方法...对于在js中来判断checkbox是否被选中很简单,示例如下:1、直接通过checkbox的checked属性判断。HTML代码:相应的javascript代码如下:var check = document.getElementsBy...

    javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。

    d80eb125e87569e2a50567bb1cfe3ae4.png

    对于在js中来判断checkbox是否被选中很简单,示例如下:

    1、直接通过checkbox的checked属性判断。

    HTML代码:

    相应的javascript代码如下:var check = document.getElementsByTagName('input')[0];

    console.log(check.checked);//false

    因为HTML代码中没有设置checked属性值,所以默认返回false,反之则返回true;若要在HTML中设置checkbox为选中状态则可以这样设置:

    2、JavaScript调用jQuery判断checkbox是否被选中

    (1)、JQ1.6版本之前(不包括1.6版本)判断checkbox是否被选中用的是attr()方法,HTML代码与上面相同,只放JQ代码:console.log($("input[type='checkbox']").attr('checked'));//false

    (2)、JQ1.6版本之后Jquery中新引入了prop()方法,此时再用attr()方法判断checkbox的状态则会返回undefined,若有设置checked属性为true,则会返回checked而不是true

    1.6+版本prop()方法:console.log($("input[type='checkbox']").prop('checked'));//false

    (3)、除了以上两种方法JQ中还有一个is()方法同样可以判断checkbox的状态

    is()方法代码如下:console.log($("input[type='checkbox']").is(':checked'));//false

    展开全文
  • * 页面加载显示 一级复选框、二级其他复选框 选中状态为true对应的div */ showCheckBox: function () { // 一级复选框、二级其他复选框 对应的class var classArr = ['checkbox-title', 'secondOther']; class...
  • 关于复选框选中状态的判断 1.checked的选中状态 不设置checked是默认不选被选中的, 一旦设置checked="false"或者checked = false或者checked="true"或者checked = true或者不设置任何值,都会被解释为选中。 //未...
  • JS获取复选框选中个数

    千次阅读 2019-01-02 10:09:17
    在报表制作过程中,因为没有公式可以获取到根据使用者的勾选情况,计算出复选框选中个数,所以这里需要在复选框中添加“状态改变”的javascript事件,用于自动获取使用者复选框选中个数,并赋值到指定单元格中。...
  • 具体如下: 希望能帮到你!
  • 判断复选框是否选中状态 推荐两种方法的使用 第一种是prop(‘checked’); 示例代码 <input type="checkbox" id="checks"> <script> //获取文本框 let c1 = $("#checks").prop('checked'); //得到c1...
  • I want an event to fire client side when a checkbox is checked / unchecked: 当选中/取消选中复选框时,我希望事件触发客户端
  • 今天在做一个不需要from表单提交数据的复选框的小功能时,需要在复选框选中或取消选中的同时对一些后台的数据进行修改。就想到了使用js代码来监控复选框的状态,并向后台发送时时数据。关于js代码如何监控 checkbox ...
  • 这篇文章主要介绍了jquery判断复选框选中状态以及区分attr和prop,感兴趣的小伙伴们可以参考一下 最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料...
  • jsp列表页面,复选框选中状态保存,用js编写
  • 使用 jquery 获取和恢复表单值(甚至复选框选中状态) 将表单值存储在 variablue 中,如果您以后可能需要恢复它们 var formValues = $ ( '#MyAwesomeForm' ) . getFormValues ( ) ; 然后在需要时恢复这些值: $...
  • js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name="rules[]" value="15" checked="checked" data...
  • 试过所有的办法,都没有办法获取到复选框选中状态,整了一早上,最后忽然想到,难道一定要用layui官方文档提供的方式监听吗,用原生js难道就不行了,最后一试竟然成功了,不得不说,js是最强大的。 1 <div ...
  • 'hfCDAttributes%#Eval(ididex)%+%#Eval(index)%','%#Eval(price)%')}/ onclick的时候调用js方法如下: script type=text/javascript function check(checkid) { var checkboc=eval(document.myform.+checkid);...
  • 实现全选全不选反选 并且,如果是在全选状态下将子复选框选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
  • 应用场景:我们有时候需要获取到单选框或者是复选框选中的那个,得到它的value值,传送到后端进行数据的添加,修改,或者是删除。 单选框获取方法 我们只需要定义一个方法,将我们需要获取的单选框的value值传递进去...
  • js怎么获取复选框选中的值

    千次阅读 2020-05-31 20:03:11
    本篇文章主要给大家介绍js获取复选框选中的值的实现方法。 js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度。 下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的方法。...
  • el-table 筛选、复选框保持多选框选中状态viewjs view <el-table tooltip-effect="dark" style="width: 100%" :row-key="getRowKeys" :data="tableData.filter(data => !search || data.nametj.toLowerCase()...
  • 获取所有复选框选中状态的id

    千次阅读 2018-07-25 09:51:49
    var id_array = new Array(); $('input:checkbox[name=item]:checked').each(function(){ ...此时的id_array 就是所有复选框选中状态的id   each() 方法规定为每个匹配元素规定运行的函数。
  • js控制复选框选中

    千次阅读 2018-01-11 14:47:36
    // js写法 var el = document.getElementById('idValue'); //获取元素id el.checked = true; el.checked = false; // jquery写法 $('#idValue').attr('checked','true'); $('#idValue').attr
  • SVG CSS3复选框选中动画特效
  • JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id = document.getElementById("id"); alert($id.checked); Notes: JQuery中,is函数里的必须要...JS中,必须调用checked...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,474
精华内容 8,589
关键字:

js写复选框选中状态