今天处理了一个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/>(www.gendan5.com) <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来写的倒是可以使用这个代码呢。