取消选中复选框会触发事件 [英] On unchecking a checkbox trigger an event

查看:113
本文介绍了取消选中复选框会触发事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码

I have following code

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

Suppose I checked a checkbox I am getting the id of that check box.

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

如何从ID变量中取消复选框的元素ID?

How to remove the the id of element on unchecking a checkbox from id variable ?

我试图做一个ajax调用,当我点击复选框时,我应该得到
a url,其中包含复选框的id例子... /?cat = 7 %2C7%2C6%2C

I am trying to make an ajax call,When I click on the check boxes then I should get a url containing the ids of the checkboxes example .../?cat=7%2C7%2C6%2C

以及取消选中复选框的ID不应存在

and on unchecking the check boxes those check boxes ids should not be present

推荐答案

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

You will be creating duplicate ids in the list, an easy solution is to recreate the id string every time like

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

演示:小提琴

这篇关于取消选中复选框会触发事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆