判断input是否被选中

浏览: 101次 日期:2018年08月02日 20:12:51 作者:青格勒

今天处理了一个input被选中的问题,所以今天就谢谢input被选中的一些js相关的问题吧。

input的被选中属性叫做checked。

checked是input的多选框type=”checkbox”、单选框type=”radio”的属性。

 

checked在JS里面有两个属性:

1、选中的时候是true

2、不被选中的是false

到这里的时候很多人已经知道怎么去判断input是否被选中怎么写了。

 

首先咱们先写一个布局,尽量简单点:

<div id="box">
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="radio"/><br/>
    <input type="radio"/><br/>
</div>
<button id="button1">JQ方法</button>
<button id="button2">原生JS方法</button>

为了大家的方便理解我使用原生JS和JQ都写一个把。在input被选中上其实原生JS更为直接和有效率(个人看法)

 

先来JQ判断input被选中的吧:

$(function () {
    $('#button1').click(function () {
        $('#box input').each(function (index) {
            if ($(this).get(0).checked == true){
                console.log('第' + index + 'input被选中了');
            }else{
                console.log('第' + index + 'input没被选中');
            };
        });
    });
});

这个代码只能算中规中矩,不算太烂也不算太好,其实咱们可以使用for循环更好,当然JQ的each是一个特别强大的属性,所以这里就用each吧。

 

下面是原生JS的方法判断input被选中:

var box = document.getElementById('box');
var inputs = box.getElementsByTagName('input');
var button2 = document.getElementById('button2');
button2.onclick = function () {
    for (var i=0; i<inputs.length; i++){
        if (inputs[i].checked == true){
            console.log('第' + i + 'input被选中了');
        }else{
            console.log('第' + i + 'input没被选中');
        };
    };
};

这个代码我还是比较满意的,如果你的项目是原生JS来写的倒是可以使用这个代码呢。

 

 

 

 

 

 

 

 

 

文章链接:http://cenggel.com/js/146.html

版权声明:文章《判断input是否被选中》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注