使用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>

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