226

所以我有如下代码：

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

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

编辑：要添加，只有一个复选框。

4

13 回答 13

310

以上都不适合我，但只需使用这个：

document.querySelector('.messageCheckbox').checked;
于 2015-03-27T13:19:40.117 回答
301

对于现代浏览器：

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

通过使用jQuery：

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

纯 javascript 没有jQuery：

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
于 2012-07-22T11:06:03.337 回答
131

我在我的代码中使用它。试试这个

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

如果复选框被选中，则为x真，否则为假。

于 2013-09-02T13:01:44.440 回答
18

在普通的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);
    }
}
于 2012-07-22T11:02:44.330 回答
7

这并不能直接回答问题，但可能会对未来的访问者有所帮助。

如果您希望变量始终是复选框的当前状态（而不是必须不断检查其状态），您可以修改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})
于 2018-04-08T08:52:21.277 回答
5 

$(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">

于 2016-08-10T15:16:59.040 回答
3

用这个：

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

这假设要检查的复选框具有“messageCheckbox”类，否则您必须检查输入是否为复选框类型等。

于 2012-07-22T10:57:42.393 回答
3 
<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);
}
于 2019-02-17T19:45:03.633 回答
2

当未选中该框时，以上所有方法都对我不起作用，而不会在控制台中引发错误，因此我按照这些思路做了一些事情（onclick 和复选框功能仅用于演示目的，在我的用例中，它是一部分更大的表单提交功能）：

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>

于 2020-01-07T07:47:53.080 回答
0

如果您使用Semantic UI React，data则作为第二个参数传递给onChange事件。

因此，您可以checked按如下方式访问该属性：

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />
于 2018-04-19T14:11:52.680 回答
0

如果您想使用 jQuery 获取所有复选框的值，这可能会对您有所帮助。这将解析列表，并根据所需的结果，您可以执行其他代码。顺便说一句，为此，不需要用括号 [] 命名输入。我离开了他们。

  $(document).on("change", ".messageCheckbox", function(evnt){
    var data = $(".messageCheckbox");
    data.each(function(){
      console.log(this.defaultValue, this.checked);
      // Do something... 
    });
  }); /* END LISTENER messageCheckbox */
于 2020-12-08T22:35:16.937 回答
0

纯 JavaScript 和现代浏览器

// for boolean
document.querySelector(`#isDebugMode`).checked

// checked means specific values
document.querySelector(`#size:checked`)?.value ?? defaultSize

例子

<form>
  <input type="checkbox" id="isDebugMode"><br>
  <input type="checkbox" value="3" id="size"><br>
  <input type="submit">
</form>

<script>
  document.querySelector(`form`).onsubmit = () => {
    const isDebugMode = document.querySelector(`#isDebugMode`).checked
    const defaultSize = "10"
    const size = document.querySelector(`#size:checked`)?.value ?? defaultSize
    //  for defaultSize is undefined or null
    // const size = document.querySelector(`#size:checked`)?.value
    console.log({isDebugMode, size})
    return false
  }
</script>

于 2021-11-10T03:58:18.543 回答
-5

在我的项目中，我通常使用这个片段：

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

而且效果很好。

于 2016-08-03T02:18:27.187 回答