Javascript：复选框 onchange/onclick 功能不起作用答案

【问题标题】：Javascript: checkbox onchange/onclick function not workingJavascript：复选框 onchange/onclick 功能不起作用
【发布时间】：2016-11-08 07:27:14
【问题描述】：

我有这个功能让我的计算是，只要填充文本字段，它将将堆栈添加到变量，并且只要在文本字段上检查复选框时，文本字段不会添加值。

除了复选框功能外，一切正常，我已经尝试过 onchange 和 onclick 但没有任何反应。你能检查我的代码吗？

脚本：

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>

【问题讨论】：

你的submission函数应该被调用，在里面放一个console.log
我不明白你的意思，我在两个输入上都调用了函数名。
是的，它也应该在两个输入上都被调用
我没有收到您在第一条评论中提到的“console.log”。
好的，你能设置一个plunker吗？

标签： javascript jquery html checkbox

【解决方案1】：

onclick 事件处理程序将适用于复选框，您可以尝试此代码， HTML：

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

JS：您可以使用以下代码检查复选框是否被选中，

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

如果为真则表示复选框已被选中，如果为假则表示未选中。

【讨论】：

【解决方案2】：

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

不需要在 html 上提及 onclick 功能。只需在 JS 中添加此代码即可。
它根据 id 自动调用。

如果您在理解方面需要任何帮助，请告诉我。

阿杰

【讨论】：

【解决方案3】：

感谢您的回答，我的数学方程式好像有点搞砸了。

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

【讨论】：