CODEWITHSUNDEEP
javascriptjqueryhtml
Mukesh
Mukesh

Reputation: 7778

On unchecking a checkbox trigger an event

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

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

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

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

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

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

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

Upvotes: 1

Views: 1035

Answers (5)

Philzen
Philzen

Reputation: 4647

Your original question text was:

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

Answer:

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

You may test this snippet on any website that loads jQuery, i.e. jquery.com - open in browser, hit F12 and paste this into the console (and watch it destroy the whole CSS ;) ):

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

Update:
From reading your updated question, i believe what you are asking for is pretty much covered by the answers above.

My two cents: id was (and still is) amiguous in your question context, better names for the variable would be ids, csvIdString, concatenatedCheckboxIds, or whatever describes the variable best in its context (following Clean Code Philosophy)

Upvotes: 0

malkassem
malkassem

Reputation: 1957

If I understand your question correctly, below is the javascript that you are looking for:

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

I think the key is to re-initialize the id variable to blank, so you do not keep adding values to it.

jsFiddle for working example

Upvotes: 1

Jeff
Jeff

Reputation: 12163

Consider another approach.

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!

Some may consider it a "performance hit" by reinitializing every time, but seeing as you only have very few checkboxes, I see no problem.

Upvotes: 0

Mauro Valvano
Mauro Valvano

Reputation: 933

Don't use a String, but use an array:

var ids = new Array();

For the check don't use the click event, but the change event:

$(".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
   }
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Demo: Fiddle

Upvotes: 3

Related Questions