Question

我有三个复选框，如下所示：

<input id="image_tagging" class="1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">

现在我想创建一些ajax（工作正常）但是只有第一个复选框才有事件：

这是我的Jquery函数：

    $('#image_tagging').click(function(){
    var value = 0;
    var websiteID = $(this).attr('class');
    if($(this).attr('checked')){
        value = 4;
    }else{
        value = -4;
    }
    alert('works! '+'id = '+websiteID+" value = "+value );
});

所以我的问题是。为什么这个点击功能只发生在我的一个复选框上？（如果重要的话，它只是第一个正在运行的复选框）

Answer 1

id在html页面上必须是唯一的。而是在标记中使用一个类，在jQuery中使用类选择器。

<强> HTML

<input class="image_tagging 1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">

<强>的Javascript

$('.image_tagging').click(function(){
    var value = 0;
    var websiteID = $(this).attr('class');
    if($(this).attr('checked')){
        value = 4;
    }else{
        value = -4;
    }
    alert('works! '+'id = '+websiteID+" value = "+value );
});

Answer 2

ID必须是唯一的，而是将id更改为类

id="image_tagging"

到

class="image_tagging"

然后

  $('.image_tagging').click(function(){

Answer 3

in html

<input class="image_tagging" type="checkbox" value="1" checked="checked" name="data[image_tagging]">

在js中

 $('.image_tagging').click(function(){ 
// your code

});

Answer 4

id必须是唯一的，请改用类或尝试此...

$('input[type="checkbox"]').click(function(){
    var value = 0;
    var websiteID = $(this).attr('class');
    if($(this).attr('checked')){
        value = 4;
    }else{
        value = -4;
    }
    alert('works! '+'id = '+websiteID+" value = "+value );
});

无需更改您已编写的任何HTML代码......

Answer 5

ID在您的DOM结构中应该是唯一的。对于此类事情，请使用class代替ID。

<input id="image_tagging" class="img_tagging 1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">

然后使用#image_tagging代替.image_tagging来绑定点击事件

$('.image_tagging').click(function(){

Jquery只注册一个id

5 个答案: