Javascript 取消选中复选框时触发事件

我有以下代码

<li>
    <input type="checkbox" value="1" class="filter" name="Bedroom">
    <a id="1" href="javascript:void(0)" class="filter1"> Bedroom </a>           
</li>

<li>
    <input type="checkbox" value="7" class="filter" name="Living Room">
    <a id="7" href="javascript:void(0)" class="filter1"> Living Room </a>           
</li>

<li>
    <input type="checkbox" value="6" class="filter" name="Corridor">
    <a id="6" href="javascript:void(0)" class="filter1"> Corridor </a>          
</li>
</ul>

如何在从id变量中取消选中复选框时删除元素的id

我正在尝试进行ajax调用，当我单击复选框时，我应该得到 包含复选框ID的url示例…/？cat=7%2C7%2C6%2C

---

取消选中这些复选框时，这些复选框id不应出现

您将在列表中创建重复的id，一个简单的解决方案是每次重新创建id字符串，如

var id;
var $checks = jQuery('.filter').change(function () {
    id= $checks.filter(':checked').map(function () {
        return this.value;
    }).get().join(', ');
    console.log(id);
});

---

演示：

您将在列表中创建重复的id，一个简单的解决方案是每次重新创建id字符串，如

var id;
var $checks = jQuery('.filter').change(function () {
    id= $checks.filter(':checked').map(function () {
        return this.value;
    }).get().join(', ');
    console.log(id);
});

---

演示：

不要使用字符串，而是使用数组：

var ids = new Array();

对于检查，不要使用click事件，而使用change事件：

$(".filter").change(function() {


   if ($(this).prop("checked") == true) {
      // Add the id to the list
      ids.push($(this).attr("id")); // Note the attribute, not the val()!
   } else {

      var index = -1;
      $.each(ids, function(idx, value) {
          if (value == $(this).attr("id")) index = idx;

      });

      ids.splice(idx, 1); //Remove the id
   }
}

---

不要使用字符串，而是使用数组：

var ids = new Array();

对于检查，不要使用click事件，而使用change事件：

$(".filter").change(function() {


   if ($(this).prop("checked") == true) {
      // Add the id to the list
      ids.push($(this).attr("id")); // Note the attribute, not the val()!
   } else {

      var index = -1;
      $.each(ids, function(idx, value) {
          if (value == $(this).attr("id")) index = idx;

      });

      ids.splice(idx, 1); //Remove the id
   }
}

---

考虑另一种方法

var ids = [];
jQuery('.filter').change(function(){          
    ids = []; // Reinitialize array
    jQuery('.filter:checked').each(function(){
        ids.push(this.value);
    });
    alert(ids.join(',')); // Stringifies your array, using a comma as a separator.
});   

// You have access to ID's in outer scope as well!

有些人可能认为每次重新初始化都是一次性能攻击，

---

但鉴于您只有很少的复选框，我认为没有问题。

考虑另一种方法

var ids = [];
jQuery('.filter').change(function(){          
    ids = []; // Reinitialize array
    jQuery('.filter:checked').each(function(){
        ids.push(this.value);
    });
    alert(ids.join(',')); // Stringifies your array, using a comma as a separator.
});   

// You have access to ID's in outer scope as well!

有些人可能认为每次重新初始化都是一次性能攻击，

---

但鉴于您只有很少的复选框，我认为没有问题。

您最初的问题文本是：

如何在取消选中复选框时删除元素的id

答复:

jQuery('.mySelector').each(function() {
    jQuery(this).removeAttr('id');
}

您可以在任何加载jQuery的网站上测试此代码段，例如jQuery.com-在浏览器中打开，点击F12并将其粘贴到控制台中，然后看着它破坏整个CSS；：

$('div').each(function() { $(this).removeAttr('id'); }

更新： 通过阅读你的最新问题，我相信上面的答案几乎涵盖了你的要求

---

我的2美分：id在您的问题上下文中过去和现在都是不存在的，更好的变量名称应该是ids、csvIdString、concatenatedCheckboxIds，或者任何在以下上下文中最能描述变量的名称您的原始问题文本是：

如何在取消选中复选框时删除元素的id

答复:

jQuery('.mySelector').each(function() {
    jQuery(this).removeAttr('id');
}

您可以在任何加载jQuery的网站上测试此代码段，例如jQuery.com-在浏览器中打开，点击F12并将其粘贴到控制台中，然后看着它破坏整个CSS；：

$('div').each(function() { $(this).removeAttr('id'); }

更新： 通过阅读你的最新问题，我相信上面的答案几乎涵盖了你的要求

---

我的2美分：id在您的问题上下文中过去和现在都是不常见的，更好的变量名称应该是ids、csvIdString、concatenatedCheckboxIds，或者任何在以下上下文中最能描述变量的名称

如果我正确理解您的问题，下面是您正在寻找的javascript：

var id='';
$('.filter').click(function(){          
    id='';
    $('.filter').each(function(){      
        if(this.checked)
        {
            id+=$(this).val()+',';
        }               
    });
    alert(id);
});

我认为关键是将id变量重新初始化为空，这样就不会一直向它添加值

---

例如，如果我正确理解您的问题，下面是您正在寻找的javascript：

var id='';
$('.filter').click(function(){          
    id='';
    $('.filter').each(function(){      
        if(this.checked)
        {
            id+=$(this).val()+',';
        }               
    });
    alert(id);
});

我认为关键是将id变量重新初始化为空，这样就不会一直向它添加值

---

对于工作示例

click事件会同时调用check和uncheck。你能解释一下你想要达到什么目的吗。@malkassem请看更新的问题我根据你更新的问题添加了一个答案…谢谢所有发布答案的人。点击事件会同时进行检查和取消检查。你能解释一下你想要达到什么目的吗。@malkassem请看更新的问题我根据你更新的问题添加了一个答案…感谢所有发布了answersNice touch的人将原始选择存储在$checks中。将原始选择存储在$checks中的触感很好。谢谢，我想要一样的。谢谢，我想要一样的。