获取复选框的值?

2020/10/20 03:21 · javascript ·  · 0评论

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

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

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

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

对于现代浏览器

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;
      }
}

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

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

快乐的编码。

我在我的代码中使用这个

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

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

用简单的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);
    }
}
$(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">

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


如果要使变量始终是复选框的当前状态(而不是必须始终检查其状态),则可以修改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})

用这个:

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

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

<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);
}

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

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

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

当没有选中该框时,以上方法对我都没有起作用,也没有在控制台中引发错误,因此我沿这些方式做了一些事情(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>

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

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

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

本文地址:http://javascript.askforanswer.com/huoqufuxuankuangdezhi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!