Javascript 如何在multicheckbox onchange事件中获取复选框值

我在woocommerce结帐页面上创建了两个自定义字段。第一个字段是文本，第二个字段是多复选框。我希望这两个字段使用Onchange事件在同一页上显示输出

文本字段代码为

<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm11 wooccm-type-text validate-required woocommerce-validated" id="billing_wooccm11_field" data-priority="50">
    <label for="billing_wooccm11" class="">Other NAME&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text wooccm-required-field" name="billing_wooccm11" id="billing_wooccm11" placeholder="" value="" data-required="1">
    </span>
</p>

其他名称*

我用这段代码来显示文本字段的值

<script>

document.getElementById("billing_wooccm11").onchange = function() {myFunction()};

function myFunction() {
var input = document.getElementById("billing_wooccm11").value;

document.getElementById("demo").innerHTML = input;
}
</script>

    <p id="demo"></p>

document.getElementById（“billing_woocm11”）.onchange=function（）{myFunction（）}；
函数myFunction（）{
var输入=document.getElementById（“billing_-11”）.值；
document.getElementById（“demo”）.innerHTML=input；
}

它正在工作，并按要求显示其价值。但第二个字段是multicheckbox，它不起作用

多复选框字段代码为

<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm14 wooccm-type-multicheckbox validate-required" id="billing_wooccm14_field" data-priority="130">
    <label for="billing_wooccm14" class="">PROGRAMME&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper"> 
        <span class="woocommerce-multicheckbox-wrapper" data-required="1">
            <label><input type="checkbox" name="billing_wooccm14[]" value="one"> One</label>
            <label><input type="checkbox" name="billing_wooccm14[]" value="two"> Two</label>
            <label><input type="checkbox" name="billing_wooccm14[]" value="three"> Thress</label>
            <label><input type="checkbox" name="billing_wooccm14[]" value="Four"> four</label>
        </span>
    </span>
</p>

节目*
一个
两个
特雷斯
四

---

我想显示复选框的文本，就像文本字段一样。所以当任何复选框被选中时，它的值应该出现，如果用户取消选中它，它的文本也应该消失

我有办法做到这一点，假设我们有两个输入复选框按钮。首先，必须使用name属性遍历已有的按钮

<input type="checkbox" class="myinput" name="input_check" value="one">
<input type="checkbox" class="myinput" name="input_check" value="two">

那么对于js代码：

document.querySelector('[name="input_check"]').onchange = function() {myFunction()};
function myFunction(){
var checkbox = document.querySelectorAll('.myinput');
for(let i=0; i<checkbox.length; i++)
  if (checkbox[i].checked)
      document.getElementById('demo').innerHtml = checkbox[i].value;
}

document.querySelector（'[name=“input_check”]'）。onchange=function（）{myFunction（）}；
函数myFunction（）{
var checkbox=document.querySelectorAll（'.myinput'）；
对于（让i=0；i我有一个方法来实现这一点，假设我们有两个输入复选框按钮。首先，必须使用name属性遍历您拥有的按钮

<input type="checkbox" class="myinput" name="input_check" value="one">
<input type="checkbox" class="myinput" name="input_check" value="two">



那么对于js代码：

document.querySelector('[name="input_check"]').onchange = function() {myFunction()};
function myFunction(){
var checkbox = document.querySelectorAll('.myinput');
for(let i=0; i<checkbox.length; i++)
  if (checkbox[i].checked)
      document.getElementById('demo').innerHtml = checkbox[i].value;
}

document.querySelector（'[name=“input_check”]'）。onchange=function（）{myFunction（）}；
函数myFunction（）{
var checkbox=document.querySelectorAll（'.myinput'）；
对于（设i=0；我正在研究一个解决方案，看起来很不错simple@Nanoo是的，它可能很简单，但不幸的是我无法做到。我可以很快帮你-我确实有一个答案，但假设Ess的答案是合适的。不，这不起作用。如果你有答案，请尽快在这里发布。制定解决方案，看起来很不错simple@Nanoo是的，是的不简单，但不幸的是，我不能这么做。我可以很快帮你-我确实有答案，但假设Ess的答案是合适的。不，这不起作用。如果你有答案，请尽快在这里发布。谢谢你的答案，但它对我不起作用。我没有
输入
字段中的
类
。我正在使用插件在中生成这些字段，因此不能具有类或id。您可以使用名称而不是替换为此var checkbox=document.queryselectoral（'[name=“input\u check”]'））；谢谢你的回答，但它对我不起作用。我在
输入
字段中没有
类
。我正在使用插件生成这些字段，因此不能有类或id。你可以使用名称，而不是将其替换为这个var checkbox=document.queryselectoral（'[name=“input\u check”]）；