jQuery: Radio button value are not clearing

Question

I have a code here .

<div class="proptions_container">

<button class="showbutton classname" >Call</button>
<div id="rd" style="display:none;">
<form id="blankform">   
<input class="check_val" type="radio" name="check_val" onClick="setShemp(this.value)" value="callondesktop">Call On Desktop<br>
</form>
<form id="valueform">
<input class="check_val" type="radio" name="check_val" onClick="setShemp(this.value)" value="callonphone">Call On Phone
</form>
</div>
<div id="custom_proptions" style="display:none;">
<form style="border: 1px solid; display: block; float: left; padding: 13px 13px 12px 14px;">    
<input name="proption_1" type="text" class="text" id="proption_1" placeholder="First Proption" />
<br>
<input name="proption_2" type="text" class="text" id="proption_2" placeholder="Second Proption" />
<br>
<input type="submit" class="classname" value="Call" />
<button id ="cancel"  class="classname">Cancel</button>
</form>
</div>

<script>
    function setShemp(value)
    {
        if(value == 'callondesktop')
            {
                       $("#blankform").submit();
            }

        if(value == 'callonphone'){
            $('div#rd').slideUp('slow');
            $('.showbutton').hide();
            $('#custom_proptions').slideDown('slow');

        }

    }

    $('#cancel').click(function(e) {
        $('.check_val').val('');  
        e.preventDefault();



        $('#custom_proptions').slideUp('slow');
         e.preventDefault();
        //$('div#rd').slideDown('slow');
        $('.showbutton').show();
    });



    $('.showbutton').click(function() {
        $('div#rd').slideDown('slow');
    });

 $('#proptions').click(function() {
        if ($(this).find(':selected').val() === '5') {
            $('div#custom_proptions').slideDown('slow');
        } else {
            $('div#custom_proptions').slideUp('slow');
        }
    });
</script>

There is two radio button is appearing while clicking on call button (None of them are checked ).

After selecting the the Call on Phone radio i am displaying a html form which contains two button Call and Cancel .

On clicking over Cancel i am just displaying the main call button .

Now here is the problem . While clikcing to Main Call button the previous selected value of the radio is appearing which i don't want .

I want none of the radio value should be selected while clicking on call button.

Kindly do let me know why radio button value is diplaying as a selected value for the second time .What might i am doing wrong here ?

score 1 · Answer 1 · answered Feb 08 '13 at 06:09

1

Property values such as checked state and disabled state for elements should be handled via .prop, not .attr. Use:

$("input[name='check_val']").prop('checked', false);

answered Feb 08 '13 at 06:09

Explosion Pills

188,624
52
326
405

1

`.attr` is wrong for properties. It's a bit ambiguous, but a good rule of thumb is to use `.prop` for `checked` and `disabled`, `.attr` for most others. That is *not* 100% correct, just a rule of thumb. – Explosion Pills Feb 08 '13 at 06:12
you can go through the link here http://stackoverflow.com/questions/5874652/prop-vs-attr... if you want to read more abt prop and attr.. :) – bipen Feb 08 '13 at 06:16

bipen · Accepted Answer · 2013-02-08T06:11:04.460

0

what you can just do is..On click function of showbutton.. uncheck both the radio ...

  $('.showbutton').click(function() {
    $('input[name="check_val"]').attr('checked', null);  
     //Or u can just use class selector $('input.check_val').attr('checked', null);
    //OR using prop $("input[name='check_val']").prop('checked', false);
    $('div#rd').slideDown('slow');

});

edited Feb 08 '13 at 06:11

answered Feb 08 '13 at 06:05

bipen

36,319
9
49
62

as @Explosion Pills says prop can also be used...prop() was used after jquery version 1.6.. you can go through this link if you want to read more http://stackoverflow.com/questions/5874652/prop-vs-attr – bipen Feb 08 '13 at 06:15

score 0 · Answer 3 · edited Feb 08 '13 at 06:08

0

Remove the attribute "checked"

 $('input[name="check_val"]').removeAttr('checked');

edited Feb 08 '13 at 06:08

bipen

36,319
9
49
62

answered Feb 08 '13 at 06:08

Shahul Hameed P

11

score 0 · Answer 4 · answered Feb 08 '13 at 06:12

0

Try this

 $('input[name="check_val"]').attr('checked',false);

answered Feb 08 '13 at 06:12

nrsharma

2,532
3
20
36

score 0 · Answer 5 · answered Feb 08 '13 at 06:15

0

You can do at this:

$('.showbutton').click(function () {
    $('div#rd').slideDown('slow');
    $(':radio:checked').prop('checked', false);
});

answered Feb 08 '13 at 06:15

Jai

74,255
12
74
103

jQuery: Radio button value are not clearing

5 Answers5