如何解决复选框值
我正在尝试获取选中的复选框的值并将其放在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++;
});
}
希望您能提供帮助
解决方法
尝试一下
<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来使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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。