复选框值答案

【问题标题】：Checkboxes values复选框值
【发布时间】：2020-12-21 22:07:43
【问题描述】：

我正在尝试获取我检查的复选框的值并将它们放入一个 php 变量中，但是当我输出该值时，它给了我零 (0)。如果我选中 3 个框，我会得到三个零，等等。信息：我希望每个复选框都被选中，所以如果选中 cb1 和 cb3，我希望变量为“cb1cb3”

HTML 代码：

<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" onclick="click()" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" onclick="click()"  name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" onclick="click()"  name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>

JS/php 代码：

function click(){
    
    $("input[name='cb[]']:checked").each(function ()
    {   
        cb+=$(this).text();
        //also tried to put a $ sign in front of the cb variable: $cb+=$(this).text();
        //and with val instead of text: $cb+=$(this).val();
        i++;
    });
}

希望你能帮忙

【问题讨论】：

标签： php html jquery checkbox

【解决方案1】：

不使用内联 JS 将 JS 和 HTML 分开是一种很好的做法。另外我会使用change 事件和.map() 方法如下：

$('input[name="cb[]"]').on('change', function() {
    const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
    console.log( checkedVals ); //array
    console.log( checkedVals.join('') ); //strings: values concatenated
});

演示

$(function() {
    $('input[name="cb[]"]').on('change', function() {
        const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
        console.log( checkedVals );
        console.log( checkedVals.join('') );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>

【讨论】：

【解决方案2】：

试试这个

<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>
<script>
    $("input[name='cb[]']").on("click", (e) =>{
        let cb="";
        $("input[name='cb[]']:checked").each(function ()
        {   
            cb+=$(this).val();
        //     i++;
        });
        console.log(cb);
    });
</script>

我将您的复选框 html ...onclick="click()"... 替换为

$("input[name='cb[]']").on("click", (e) =>

然后在 js 中，我添加了 let cb = "" 以重置新点击事件的值

cb+=$(this).text() 更改为 cb+=$(this).val(); 导致 $(this).text() 在 console.log 上没有返回任何内容

【讨论】：

我在 js 中将 ...onclick="click()"... 替换为 $("input[name='cb[]']").on("click", (e) => 然后我添加了`let cb = ""` 以重置点击事件的值并完成@987654328 @ 更改为 cb+=$(this).val(); 导致 $(this).text() 在 console.log 上没有返回任何内容
输入没有文字....文字在标签中。