复选框未选中 var 值 0 复选框已选中 var 值 1答案

【问题标题】：checkbox unchecked var value 0 checkbox checked var value 1复选框未选中 var 值 0 复选框已选中 var 值 1
【发布时间】：2020-11-30 22:44:28
【问题描述】：

在代码的最后一部分，我有多个复选框。我有一个名为 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>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="nome">Nome:</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="nome" name="nome" required> </div>
                                <label class="control-label col-sm-2" for="cognome">Cognome:</label>
                                <div class="col-sm-4"> 
                                <input type="text" class="form-control" id="cognome" name="cognome" required> </div>
                            </div>
                            <br>
                            <br>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="sesso">Sesso:</label>
                                <div class="col-sm-4">
                                    <select id="sesso" name="sesso" >
                                        <option value=" "> </option>
                                        <option value="m">Maschio</option>
                                        <option value="f">Femmina</option>
                                    </select>
                                </div>  
                                <label class="control-label col-sm-2" for="posizione">Posizione:</label>
                                <div class="col-sm-4">
                                    <select id="posizione" name="posizione" >
                                        <option value=" "> </option>
                                        <option value="Staff">Staff</option>
                                        <option value="Operatore">Operatore</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <br>
                            <div class='form-group'>
                                <?php 
                                    $sql = "SELECT id, posizione, nome
                                            FROM user_livelli";                 
                                    $result = $conn->query($sql);
                                    if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                            $id = $row['id'];
                                            $posizione = $row['posizione'];
                                            $nome = $row['nome'];                           
                                ?>      
                                    <input type='checkbox' name='nome_posiz[]'/> <?php echo $nome; ?>
                                    <div id='show' class='col-sm-4'></div>
                                <?php
                                        }
                                    }
                                ?>
                            </div>
                            <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>
                            
                            <script>
                                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 );
                                oInput.value=livello.join(''); 

                                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('');
                                    });
                                })
                            </script>                               
                            
                    </div>    
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" name="add_utente"><span class="glyphicon glyphicon-plus"></span> Aggiungi</button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Annulla</button>
                    </div>                       
                </form>
            </div>
        </div>
    </div>

当我添加一个新的 UTENTE（用户）时，我希望 Livello 位于 000000，因为未选中 6 个复选框。当我选中一个或多个复选框时，Livello 立即将值更改为例如 100011。

编辑中的 PS 该脚本非常适合添加一个新用户，管理员检查必要的复选框。如何更改脚本以编辑用户数据。在这种情况下，复选框是否被选中（并且这部分已经有效），livello 的值类似于 0010011100 我想在 livello 输入框中打印 livello 值，如果我选中或取消选中复选框，这个值也会改变

【问题讨论】：

在 PHP 中，您是否在每个复选框上执行 isset()？如果它们没有被选中，那么它们将不会出现在他们的 POST 或 GET 中
我认为您将 value 与布尔值混淆了（以您编造的某种二进制方式？）。复选框是否被选中并不能达到这个目的。

标签： javascript php html jquery

【解决方案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>

【讨论】：

这正是我需要的，但我需要将它集成到我的引导模式页面中
唉，因为我对所涉及的技术知之甚少，所以我可以提供很少的帮助。这只涉及转换为 jQuery 代码吗？
如何将 'liveello' 值从 jquery 发送到 <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>
我按照您的建议更改了代码，但正如您从图片中看到的（我编辑了我的帖子），livello 值超出了 livello 输入框。当我按下 Aggiungi 按钮时，我还需要它的值将其发送到表中。谢谢
@MassimoD.N.我明白了..here 是 jquery 的解决方案，还在代码中添加了 cmets，以便您理解。

【解决方案2】：

你可以使用类似的东西

$livello = "";
if(isset($_POST['checkbox1']){
    $livello .= "1";
} else {
    $livello .= "0";
}
if(isset($_POST['checkbox2']){
    $livello .= "1";
} else {
    $livello .= "0";
}

【讨论】：

【解决方案3】：

感谢 Swati 提供的 jquery 代码，我知道要在代码开始后立即在 livello 中看到字符串（所有零都未选中），只需添加 oInput.value=liveello.join('');在javascript中的字符串声明之后。非常感谢

【讨论】：