JavaScript：复选框onchange / onclick函数不起作用

Question

I have this function for my computation that whenever the text fields are populated, it will add a stack to a variable and whenever a checkbox is checked on the text field, the text field wont add a value.

everything is working except the checkbox function, I already tried onchange and onclick but nothing happens. Can you check my codes?

Script:

function submission(){
    x = 19;
    ctr = 1;
    ctr2 = 0;
    days = ('<?php echo $query[0]->totaldays; ?>') - 1;
    $('#payment').html('');
    for(i = 1; i<=x ; i++){
        if($('#guest'+i).val() != ""){
          ctr++;
        }
        if(document.getElementById('kid'+i).checked){
          ctr2++;
        }
    }

    totalCount = 0;
    totalCount = parseInt(ctr) - parseInt(ctr2);
    totalCount = parseInt(ctr) * parseInt(days);
    totalCount = parseFloat(totalCount) * 100;
    $('#totalPayment').val(totalCount);
    $('#payment').html(totalCount);

}

HTML:

    <div class="row">
    <div class="col-sm-10">
        <label for="exampleInputtext1"><a style = "color:black; font-size: 10px;" ><input onchange="submission()" type="checkbox" name="kid1" id="kid1" > </a>Guest 1:</label>
    <input type="text" class="form-control" onblur="submission()"  name="guest1" id="guest1"/>
        </div>
    </div>

Answer 1

The onclick event handler will work for checkbox,you can try this code, HTML:

<input onclick="submission(this)" type="checkbox" name="kid1" id="kid1" >

JS: And you can check and see whether the checkbox is checked or not using the following code,

function submission(click){
....
var clicked=click.checked;
...
}

if it is true that means the checkbox has been checked and if it is false it has not been checked.

Answer 2

$("#guest1").change(function() {
if(this.checked) {
    //Do this.
}
else{
   // Do this.
}});

• don't need to mention onclick function on html. just add this code in JS.
• its calling auto based on id.

let me know if you need any help in understanding.

Ajay

Answer 3

thanks for your answers, it seems like I just messed up a little bit on my mathematical equation.

totalCount = 0;
totalCount = parseInt(ctr) - parseInt(ctr2);
totalCount = parseFloat(totalCount) * parseInt(days);
totalCount = parseFloat(totalCount) * 100;
$('#totalPayment').val(totalCount);
$('#payment').html(totalCount);