How to change multiple populated checkbox input field values?

Question

I was looking for solution, how to change multiple populated checkbox - input field values with JavaScript help. How to change values yes to no and no to yes if checkbox checked. Here is the part of code I use:

html form:

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

this part is working perfectly:

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

but how to make to work this part of js code which makes populated checkbox values change value from no to yes and yes to 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>');
                });

The idea is something like this:

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

checkbox checked not changing no to yes value in new populated rows:

Can't find answers by myself. I hope the idea is clear and someone can help me with this!

Am I right in thinking: initially the checkbox would look like "No: □", but if the user checks it, it changes to "Yes: ☑"? This is not the standard way that checkboxes work and could very easily lead to confusion for users. These also don't look necessary, because if a user didn't want a place+date combination they can just press the minus button to delete that combination. — Robson
– Robson, Commented Aug 20, 2021 at 20:49
thanks for answer. those fields are with different meaning, I just post the sample for idea. What I need: is to change new populated fields values if checkbox checked from "no" to "yes" and place data in mysql and if checkbox not checked change it back to "no" and also update data in mysql. That is the idea. — Axīc
– Axīc, Commented Aug 20, 2021 at 20:59

jiali · Accepted Answer · 2021-08-20 20:58:53Z

You can use other way with set .trick class to checkbox

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

In fact your issue is the other checkbox are not part of the DOM and will be added to DOM with click event of #add3

$(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>

Collectives™ on Stack Overflow

How to change multiple populated checkbox input field values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related