使用 PHP MySQL 和 JS 操作动态输入

Question

我有一个名为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创建一个按钮，如果单击此按钮，则必须给我选中复选框的值。

Answer 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>

Answer 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>

Answer 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> 

Answer 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>

并且警报消息为空，它不显示复选框的值