CODEWITHSUNDEEP
javascriptjquery
Xavi
Xavi

Reputation: 2594

how to clear the previous checked value

I am passing the selected value to the jquery from jquery in passing to the url to the next page, this is how my check box looks like:

<label class="checkbox">
    <input  type="checkbox" value="male" id="gender" name="gender"  /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
    <input type="checkbox" value="female"  id="gender" name="gender" /> Female
</label>

<label class="checkbox" style="margin:-20px 0 0 205px">
    <input checked type="checkbox" value="all" id="gender" name="gender"> All
</label>

my jquery:

var gender = $('input[name=gender]:checked').map(function(){
    return $(this).val();
}).get();
alert(gender);

My problem is for example :

When I select the gender male it passes to jquery as 'male,' but my problem is here when I unchecked the male and check the female then it passes to jquery as female,male, it is not passing the value which is selected now it is passing the value with pervious one, can any one guide me how to solve this.

Upvotes: 0

Views: 91

Answers (2)

Axel Amthor
Axel Amthor

Reputation: 11096

First of all: an id must be unique, as soon as there are two elements with same id (like "gender"), results are arbitrary random.

And: use radio button and you're done w/o any JS or jQuery:

<label class="checkbox">
    <input  type="radio" value="male" id="gender_m" name="gender"  /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
    <input type="radio" value="female"  id="gender_f" name="gender" /> Female
</label>

<label class="checkbox" style="margin:-20px 0 0 205px">
    <input checked type="radio" value="all" id="gender_a" name="gender"> All
</label>

And if you want the radios look like check boxes, see this post

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use jQuery change event as follows

$('input[name=gender]').on('change',function(){
    var gender = $('input[name=gender]:checked').map(function(){
        return $(this).val();
    }).get();
    alert(gender);
});

DEMO

Upvotes: 1

Related Questions