使用 php mysql 和 js 操作动态输入答案

【问题标题】：manipulate dynamic input with php mysql and js使用 php mysql 和 js 操作动态输入
【发布时间】：2019-02-08 10:13:56
【问题描述】：

我有一个名为 description 的表：

CREATE TABLE description(
  word_id int(11),
  word varchar (50),
  PRIMARY KEY (word_id)
);

我尝试获取此表中的所有单词，并为每个单词创建一个复选框，其值和 id 等于从表描述中获得的单词的值，如果复选框被选中，我将他的值保存在 var abcd 中。

<?php
///connection
$get_word = $bdd->query("SELECT * FROM description");
while ($donnees = $get_word->fetch()) {
?>
    <input type="checkbox" id="<?php $donnees["word"] ?>" value="<?php $donnees["word"] ?>">
    <br>

    <script>
    $('#<?php $donnees["word"] ?>').on('change', function() {
        var abcd= this.checked ? this.value : '';
    });
    </script> 
<?php
}
?>

现在，我想在 boocle 中创建一个按钮，如果单击此按钮，它必须给我选中复选框的值。

【问题讨论】：

你可以用输入名字做这个简单的表格
你能给我一个想法

标签： javascript php jquery html sql

【解决方案1】：

以下是使用 jQuery 的方法。由于您已经拥有 PHP 逻辑，因此我的示例仅演示了 jQuery 代码：

$(document).ready(function() {
    'use strict';
    $("#getCheckedBoxes").on('click', () => {
      $('input[type="checkbox"]').each(function(i, el){
        if($(el).is(':checked'))
          console.log($(el).val())
      })
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="Item 1">Item 1
<input type="checkbox" value="Item 2">Item 2
<input type="checkbox" value="Item 3">Item 3
<button id="getCheckedBoxes">Get checked boxes</button>

【讨论】：

如果复选框是在 boocle while 内动态创建的，如果我点击一个从 boocle while 创建的按钮，我想检查复选框的值。
@user3623368，所以您需要知道单击此按钮时用户选中了哪些复选框，对吧？

【解决方案2】：

希望这能解决您的问题

PHP 代码

<?php
///connection
  $get_word=$bdd->query("SELECT * FROM description");
 while ($donnees = $get_word->fetch()) {
 ?>
<input type="checkbox" id="myid_<?php $donnees["word"] ?>" onclick="myfunc(<?php $donnees["word"] ?>)" value="<?php $donnees["word"] ?>"><br> 
 <?php
 }
?>

JS 代码

<script>
function myfunc(word){
  if(document.getElementById('myid_'+word).checked == true){
   var check_val = document.getElementById('myid_'+word).value;
   alert(check_val);
  }
}
</script>

或者你可以这样做

<script>
function myfunc(word){
  if(document.getElementById('myid_'+word).checked == true){
   alert(word);
  }
}
</script>

【讨论】：

【解决方案3】：

在您的输入标签中添加类名，例如clickable。毕竟在 php 中呈现添加脚本，当任何可点击类的输入发生变化时运行，您可以获得该标签！

<?php
$get_word=$bdd->query("SELECT * FROM description");
while ($donnees = $get_word->fetch()) { ?>
<input class="clickable" type="checkbox" id="<?php $donnees["word"] ?>" value="<?php $donnees["word"] ?>">
<?php } ?>

<script>
$('.clickable').on('change', function(item) {
    console.log(item)
});
</script>

【讨论】：

请在您的代码中添加一些解释，以便 OP 可以从您的代码中学习。 “试试这个”是不够的

【解决方案4】：

我试试这个

///connection
    $get_word=$bdd->query("SELECT * FROM description");
     while ($donnees = $get_word->fetch()) {
     ?>
     <label><?php echo $donnees["word"] ?></label>
    <input type="checkbox" id="myid_<?php $donnees["word"] ?>" onclick="myfunc(<?php $donnees["word"] ?>)" value="<?php $donnees["word"] ?>"><br>
     <?php
     }

    ?>
    <button id="getCheckedBoxes">Get checked boxes</button>
    <script type="text/javascript">
        $(document).ready(function() {
        'use strict';
        $("#getCheckedBoxes").on('click', () => {
          $('input[type="checkbox"]').each(function(i, el){
            if($(el).is(':checked'))
     alert($(el).val())   ;  
      })
        })
    })
    </script>

警告信息为空，不显示checkbox的值

【讨论】：