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

Posted 2023-05-08

【中文标题】如何更改多个填充的复选框输入字段值？

【英文标题】：How to change multiple populated checkbox input field values?

【发布时间】：2021-10-22 08:02:55

【问题描述】：

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

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";
               
);

复选框选中未在新填充的行中将 no 更改为 yes 值：

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

【问题讨论】：

我的想法是否正确：最初复选框看起来像“否：□”，但如果用户选中它，它会变为“是：☑”？这不是复选框工作的标准方式，并且很容易导致用户混淆。这些看起来也没有必要，因为如果用户不想要地点+日期组合，他们只需按减号按钮即可删除该组合。

感谢您的回答。这些字段具有不同的含义，我只是发布示例以供参考。我需要的是：如果复选框从“否”选中为“是”，则更改新的填充字段值，并将数据放入 mysql，如果未选中复选框，将其更改回“否”，并更新 mysql 中的数据。就是这个想法。

【参考方案1】：

您可以使用其他方式将.trick 类设置为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>