如何更改多个填充的复选框输入字段值？

Question

我正在寻找解决方案，如何更改多个填充的复选框 - 在 JavaScript 帮助下输入字段值。如果选中复选框，如何将值更改为否以及否更改为是。这是我使用的部分代码：

html形式：

<form method="post" action="" autocomplete="off" id="form">

            <p class="lable_2">Select place</p>
            <span class="boxx dothetrick" id="df3">
                <select data-skip-name="true" name="pl[]">
                    <option value="">select place</option>
                    <option value="Berlin">Berlin</option>
                    <option value="London">London</option>
                    <option value="Barcelona">Barcelona</option>
                </select> 
                <label for="">Date: </label><input type="date" name="pl[]" value="iesndat">
                <label for="">Yes/No: </label><input type="checkbox" name="pl[]" id="trick" value="no">
                <button type="button" name="add3" id="add3" class="btn btn-success">+</button>
            </span>

</form>

javascript:

<script>
        $(document).ready(function(){ 
             
            $('.dothetrick input[type="checkbox"]').change(function() {
            if ($(this).is(":checked")) {
                document.getElementById("trick").value = "yes";
            } else
                document.getElementById("trick").value = "no";
            });

            var i = 1;
            $('#add3').click(function(){
                i++;
                $('#df3').append('<span id="row'+i+'"><br><select data-skip-name="true" name="pl[]"><option value="">select place</option><option value="Berlin">Berlin</option><option value="London">London</option><option value="Barcelona">Barcelona</option></select> <label>Date: </label><input type="date" name="pl[]" value="iesndat"><label> Yes/No: </label><input type="checkbox" name="pl[]" id="trick'+i+'" value="no"> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove3">-</button></span>');
            });

            $(document).on('click','.btn_remove3', function(){
                var button_id = $(this).attr("id");
                $("#row"+button_id+"").remove();
            });

        });
    </script>

这部分工作完美：

$('.dothetrick input[type="checkbox"]').change(function() {
                if ($(this).is(":checked")) {
                    document.getElementById("trick").value = "yes";
                } else
                    document.getElementById("trick").value = "no";
                });

但是如何使这部分 js 代码起作用，它使填充的复选框值从 no 更改为 yes 以及 yes 更改为 no：

var i = 1;
                $('#add3').click(function(){
                    i++;
                    $('#df3').append('<span id="row'+i+'"><br><select data-skip-name="true" name="pl[]"><option value="">select place</option><option value="Berlin">Berlin</option><option value="London">London</option><option value="Barcelona">Barcelona</option></select> <label>Date: </label><input type="date" name="pl[]" value="iesndat"><label> Yes/No: </label><input type="checkbox" name="pl[]" id="trick'+i+'" value="no"> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove3">-</button></span>');
                });

想法是这样的：

var i = 1;
$('#row'+i).change(function() {
            if ($(this).is(":checked")) {
                i++;
                document.getElementById("trick"+i).value = "yes";
               
            } else
            i++;
                document.getElementById("trick"+i).value = "no";
               
});

选中复选框未将新填充行中的值从否更改为是：

自己找不到答案。我希望这个想法很清楚，有人可以帮助我！

Answer 1

您可以使用其他方式将 .trick class 设置为 checkbox

然后使用$(document).on('change', '.trick' , function() { ... })

事实上，您的问题是其他 checkbox 不属于 DOM，将通过单击 event 或 #add3 添加到 DOM

$(document).ready(function() {

    $(document).on('change', '.trick' , function() {

        if ( $(this).is(":checked") ) {

            $(this).attr('value','yes');

        } else
        {
            $(this).attr('value','no');
        }
        console.log( $(this).attr('value') )
    });
  
    var i = 1;
    $('#add3').click(function() {
      i++;
      $('#df3').append('<span id="row' + i + '"><br><select data-skip-name="true" name="pl[]"><option value="">select place</option><option value="Berlin">Berlin</option><option value="London">London</option><option value="Barcelona">Barcelona</option></select> <label>Date: </label><input type="date" name="pl[]" value="iesndat"><label> Yes/No: </label><input type="checkbox" name="pl[]" class="trick" value="no"> <button name="remove" id="' + i + '" class="btn btn-danger btn_remove3">-</button></span>');
    });
  
    $(document).on('click', '.btn_remove3', function() {
      var button_id = $(this).attr("id");
      $("#row" + button_id + "").remove();
    });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" id="form">

  <p class="lable_2">Select place</p>
  <span class="boxx dothetrick" id="df3">
        <select data-skip-name="true" name="pl[]">
            <option value="">select place</option>
            <option value="Berlin">Berlin</option>
            <option value="London">London</option>
            <option value="Barcelona">Barcelona</option>
        </select> 
        <label for="">Date: </label><input type="date" name="pl[]" value="iesndat">
        <label for="">Yes/No: </label><input type="checkbox" name="pl[]" class="trick" value="no">
        <button type="button" name="add3" id="add3" class="btn btn-success">+</button>
    </span>

</form>

如何更改多个填充的复选框输入字段值？

How to change multiple populated checkbox input field values?

html

javascript

ajax

checkbox

jquery