使用javascript收集多个不带表单标签的复选框值

Collect multiple checkbox values without form tag using javascript

本文关键字:标签 表单 复选框 javascript 使用      更新时间:2023-09-26

我正在为MyBB的插件工作,在那里我必须收集所有选中的"复选框"的值每个复选框都有不同的名称/ID &;不幸的是,这些复选框没有放置在任何表单标签下,所以我怎么能做到这一点??看看下面的代码,如果我把表单标签放在第一行,这段代码工作得很好,但如果我把表单标签放在所有复选框下面,它不会返回任何东西(实际上,这正是我如何处理MyBB中的复选框)谢谢你,

<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<form action="script.php" method="post">
  <input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
  var selchbox = [];        
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
   for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)    selchbox.push(inpfields[i].value);
  }
  return selchbox;
}

document.getElementById('btntest').onclick = function(){
  var selchb = getSelectedChbox(this.form);   
  alert(selchb);
}
//-->
</script>

>>>测试Fiddle<& lt; & lt;

嗯…with pure JavaScript:

function getCheckboxesValues(){
    return [].slice.apply(document.querySelectorAll("input[type=checkbox]"))
           .filter(function(c){ return c.checked; })
           .map(function(c){ return c.value; });
}
document.getElementById("btntest").addEventListener("click", function(){
    console.log(getCheckboxesValues());
});