Question

HTML代码：

<div id="txtAge">
    <table>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch1" value="1"><td>
    <td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>
    <td><input type="checkbox" onclick="checking()" id="ch3" value="12"><td>
    <td><input type="checkbox" onclick="checking()" id="ch4" value="3"><td>
    </tr>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch5" value="221"><td>
    <td><input type="checkbox" onclick="checking()" id="ch6" value="130"><td>
    <td><input type="checkbox" onclick="checking()" id="ch7" value="132"><td>
    <td><input type="checkbox" onclick="checking()" id="ch8" value="3333"><td>
    </tr>
    </table>

    </div>

Javascript：

function checking(){
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}

这是我的代码。当我点击复选框时它会提醒一次，当我点击其他复选框时它会提醒2次。为什么当我继续点击复选框时onclick功能触发超过1次？

这里是演示：

http://jsfiddle.net/L9z9t04p/11/

Answer 1

从复选框中删除onclick="checking"作为内联属性。

两者都将独立运行，您可以根据需要为元素添加任意数量的事件侦听器，因此不会自动删除另一个。

同样删除此检查方法，您可以直接绑定jquery.on事件

       $('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });

或者如果您不想删除checking方法并在某种情况下调用它，那么您需要确保调用checking方法

function checking(){
$('input[type="checkbox"]').off('change' ); //if the checking() is called multiple times
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}
checking();

Answer 2

问题在于您在每个内联更改事件处理程序上绑定alert事件处理程序。这将继续添加一个事件处理程序，在这种情况下你将继续获得多个change。

从复选框中删除内联<input type="checkbox" id="ch5" value="221">事件处理程序。因为你已经使用jQuery绑定它了。

HTML 的

$(document).ready(function(){
    $('input[type="checkbox"]').on('change', function() {
        $(this).closest('tr').find('input').not(this).prop('checked', true);
        alert(this.value);
    });
});

脚本

app.config

Answer 3

是否通过侦听器绑定事件：

 $('input[type="checkbox"]').on('change', function() {

或者您对函数进行内联绑定：

<td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>

不要同时执行这两项操作。发生的事情是，每次点击复选框，您都会再次注册该功能。因此，每次点击都会再次提醒上次

Answer 4

每次触发功能检查时，都会向所有复选框添加事件。每次点击都会累积。我在你的小提琴中试过这个并且它有效：

＆＃13;

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    $(this).closest('tr').find('input').not(this).prop('checked', false);
    alert(this.value);
  });
});

＆＃13;

此外，请删除复选框上的onclick调用。

Answer 5

从html中删除onclick =“checking（）”并仅为复选框绑定更改事件

点击复选框时，javascript-trigger功能2次

5 个答案: