Question

我有以下代码

<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>

java脚本

<script>

    var id='';
    jQuery('.filter').click(function(){          

    jQuery('.filter').each(function(){      
        if(jQuery(this).attr('checked'))
        {
            id+=jQuery(this).val()+',';
        }               
    });
       alert(id);

        jQuery.get('<?php echo $this->getUrl('some url') ?>',{cat:id},function(data){   
      jQuery('#id').html(data);
        });
    });         
    </script>

假设我选中了一个复选框，我将获得该复选框的ID。

id+=jQuery(this).val()+',';

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

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

并取消选中复选框，这些复选框ID不应出现

Answer 1

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

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

演示：Fiddle

Answer 2

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

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

我认为关键是将id变量重新初始化为空白，因此不要继续向其添加值。

工作示例

jsFiddle

Answer 3

不要使用String，而是使用数组：

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
   }
}

Answer 4

考虑另一种方法。

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!

有些人可能会认为这是一次＆＃34;性能上升＆＃34;通过每次重新初始化，但是看到你只有很少的复选框，我认为没问题。

Answer 5

您原来的问题文字是：

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

答案：

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

您可以在任何加载jQuery的网站上测试此代码段，即jquery.com - 在浏览器中打开，点击F12并将其粘贴到控制台（并观察它会破坏整个CSS;））:( p>

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

更新：
通过阅读您更新的问题，我相信您所要求的内容几乎涵盖了上述答案。

我的两分钱：id在您的问题上下文中（现在仍然）是不明确的，变量的更好名称是ids，csvIdString， concatenatedCheckboxIds，或其他在其上下文中最佳描述变量的内容（在Clean Code Philosophy之后）

取消选中复选框会触发事件

5 个答案: