javascript - .prop('checked', false) doesn't uncheck radio button after clicking on a label -

$(".label").click(function(){      var id = $("#uncheck");      var value = id.val();      if(value == 'unchecked'){        id.val('checked');      } else {        id.val('unchecked');        id.prop('checked', false);      }  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <label class='label' for='uncheck'>uncheck</label>  <input class='input' type='radio' id='uncheck' value='unchecked'>

i keep trying uncheck radio button won't work,

you should prevent default action (label setting radio back). can returning false event handler:

$(".label").click(function(){      var id = $("#uncheck");      if(!!id.prop('checked')) {        id.prop('checked', false);        return false;      }  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <label class='label' for='uncheck'>uncheck</label>  <input class='input' type='radio' id='uncheck' value='unchecked'>

or using event.preventdefault() method:

$(".label").click(function(e){      var id = $("#uncheck");      var value = id.val();      if(value == 'unchecked'){        id.val('checked');      } else {        e.preventdefault();        id.val('unchecked');        id.prop('checked', false);      }    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <label class='label' for='uncheck'>uncheck</label>  <input class='input' type='radio' id='uncheck' value='unchecked'>