CODEWITHSUNDEEP
javascripthtmljqueryajaxcheckbox
Axīc
Axīc

Reputation: 21

How to change multiple populated checkbox input field values?

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: enter image description here

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

Upvotes: 0

Views: 62

Answers (1)

jiali
jiali

Reputation: 616

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>

Upvotes: 1

Related Questions