1

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 ?

5 Answers 5

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);
2
  • 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. Feb 8, 2013 at 6:12
  • you can go through the link here stackoverflow.com/questions/5874652/prop-vs-attr... if you want to read more abt prop and attr.. :)
    – bipen
    Feb 8, 2013 at 6:16
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');

}); 
1
0

Remove the attribute "checked"

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

Try this

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

You can do at this:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.