获取复选框的值?


177

所以我得到的代码看起来像这样:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

我只需要Javascript来获取当前选中的任何复选框的值。

编辑:要添加,将只有一个复选框。


1
您需要JavaScript代码还是jQuery?
Andrey Vorobyev 2012年

6
为什么不使用单选按钮?
PraveenVenu 2012年

因为我正在写一个插件网站
马修“强制性”科比

如果只需要一个复选框,为什么不使用单选按钮?这是更适合此工作的UI组件。
塔尔·亚伦

@TalYaron可以取消选择单选按钮吗?我认为并非没有js代码。也许OP希望轻松取消选择该框。
R3tep

Answers:


255

对于现代浏览器

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

通过使用jQuery

var checkedValue = $('.messageCheckbox:checked').val();

没有jQuery以下内容的纯javascript

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

9
@Mageek不好的做法是在多个元素上添加相同的id。
工程师

@Engineer不,只是为每个复选框放置一个不同的ID。
Mageek

3
@Engineer“保存字节”,因为我们必须简单地编写document.getElementById("foo").value();和“保存计算”,因为getElementById它肯定比getElementsByTagNameand循环要快。
Mageek

9
jQuery .is(":checked")是正确的方法,因为.val()如果定义了属性值,它将返回属性值。即使未定义属性值,它也会返回“ on”而不是布尔值。jsfiddle.net/d5f7wnzu
Peter

1
document.querySelector('.messageCheckbox:checked').value如果未选中任何复选框,则生成TypeError
Meisner

261

以上都不对我有用,而是简单地使用这个:

document.querySelector('.messageCheckbox').checked;

快乐的编码。


我同意。你证实了我的想法。我喜欢放var chk1 = document.getElementById('messageCheckbox'); 这样,我可以引用“ chk1”变量的属性:选中,启用,样式等
。– JustJohn

4
你从哪儿得到的id?你能解释一下吗?提出问题的人class实际上在输入中使用过。如果您能提供完整的代码,那将是很好的,这样我就可以知道您从哪里得到的id
devfaysal

3
这不能与OP提供的示例代码一起使用...我很好奇为什么它得到了如此多的支持而又没有回答这个问题,尽管可以快速修复。
Laurent S.

1
您可以编辑建议的答案以扩展其作用以及如何解决操作问题吗?
Ro Yo Mi

2
@PradeepKumarPrabaharan可能像我这样的人(不对多个项目使用id)想知道为什么.value给他们带来不确定性。

111

我在我的代码中使用此

var x=$("#checkbox").is(":checked");

如果选中此复选框,则为xtrue;否则为false。


7
这不能回答问题,但是可以用来确定是否选中了一个复选框。+1,因为它仍然可以帮助我。
凯文·尤尔科夫斯基

5
没有回答问题,但正是我在寻找什么。
phn

#checkbox变量是有用的,例如myCheckbox
Optimae

15

用简单的javascript:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}
function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}

4

$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">


4

这不能直接回答问题,但可以帮助将来的访客。


如果要使变量始终是复选框的当前状态(而不是必须始终检查其状态),则可以修改onchange事件以设置该变量。

这可以在HTML中完成:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

或使用JavaScript:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})

2

用这个:

alert($(".messageCheckbox").is(":checked").val())

这假定要检查的复选框具有类“ messageCheckbox”,否则您将必须检查输入的内容是否为复选框类型,等等。


2
<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">
function getValue(value){
    alert(value);
}

0

如果您使用的是语义UI Reactdata则作为第二个参数传递给onChange事件。

因此,您可以checked按以下方式访问属性:

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />

0

当没有选中该框时,以上方法对我都没有起作用,也没有在控制台中引发错误,因此我沿这些方式做了一些事情(onclick和checkbox函数仅用于演示目的,在我的用例中,它是更大的表单提交功能):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}
<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>


-3

在我的项目中,我通常使用以下代码段:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

而且效果很好。最良好的问候。


这样做的效率极低。
AStopher '17
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.