复选框未选中 var 值 0 复选框选中 var 值 1

Question

在代码的最后一部分，我有多个复选框。我有一个名为 livello 的输入文本框，它必须将其值存储到 mysql 数据库中。复选框的数量不固定，但如果管理员将一些添加到数据库，则可能会有所不同。所以基于这段代码<!--Add Utente Modal -->    <div id="aggiungi" class="modal fade" role="dialog">        <div class="modal-dialog modal-lg">            <!-- Modal content-->            <div class="modal-content">                <form method="post" class="form-horizontal" role="form">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal">&times;</button>                        <h4 class="modal-title">Aggiungi UTENTE</h4>                    </div>                    <div class="modal-body">                        <input type="hidden" name="edit_id" value="<?php echo $id; ?>">                            <div class="form-group">                                <label class="control-label col-sm-2" for="username">Username:</label>                                <div class="col-sm-4">                                    <input type="text" class="form-control" id="username" name="username" required autofocus> </div>                                <label class="control-label col-sm-2" for="password">Password:</label>                                <div class="col-sm-4">                                 <input type="text" class="form-control" id="password" name="password" required> </div>                            </div>                            <br>                            <br>

Answer 1

ID 属性在 DOM 中必须是唯一的。因此，与其为每个元素分配与元素名称相同的 ID 集，不如使用数组样式语法。

我不是 jQuery 的用户，但我确信在 jQuery 中执行此操作是可行的，可能只需对以下内容进行少量修改。下面用于document.querySelectorAll查找对所有复选框的引用，并为每个复选框分配一个简单的侦听器。

let oShow=document.getElementById('show');

let oInput=document.getElementById('livello');

let oCol=Array.from( document.querySelectorAll('.form-group > input[type="checkbox"]') );

let livello=new Array( oCol.length ).fill( '0', 0, oCol.length );

oCol.forEach( (chk,index)=>{

    chk.addEventListener('change',function(e){

        livello.splice(index,1,this.checked ? '1':'0' );

        oShow.innerHTML=livello.join('');

        oInput.value=livello.join('');

    });

})

<div class='form-group'>

    <input type='checkbox' name='check[]' value='1' />aaa

    <input type='checkbox' name='check[]' value='1' />bbb

    <input type='checkbox' name='check[]' value='1' />ccc

    <input type='checkbox' name='check[]' value='1' />ddd

    <input type='checkbox' name='check[]' value='1' />eee

    <input type='checkbox' name='check[]' value='1' />fff

    <div id='show' class='col-sm-4'></div>

</div>

<!-- as per comment, unclear where in the DOM this snippet lives however -->

<div class='form-group'>

    <label class='control-label col-sm-2' for='livello'>Livello:</label>

    <div class='col-sm-4'>

        <input type='text' class='form-control' id='livello' name='livello'>

    </div>

</div>

Answer 2

你可以使用类似的东西

$livello = "";

if(isset($_POST['checkbox1']){

    $livello .= "1";

} else {

    $livello .= "0";

}

if(isset($_POST['checkbox2']){

    $livello .= "1";

} else {

    $livello .= "0";

}