SoFunction
Updated on 2025-03-09

How to use native js and jQuery to check and cancel the radio box

Based on the following demo, you can probably understand

Demo:

<html>
<head>
<script src='jquery-1.9.'></script>
<script>
   = function(){
    var dom_a = ('a1');
    var dom_b = ("b1");
    //alert("A="+dom_a.value+" || B="+dom_b.value);
  }

  //The following starts the operation of radio cancel and check  //Native js operation  function fn1(){
    var dom_a = ('a1');
    var dom_b = ("b1");
    //Tick    dom_a.checked = true;
    //dom_a.checked = 'false';
    //dom_a.checked = 123;
    //Uncheck    dom_b.checked = '';
    //dom_b.checked = false;//Uncheck    //dom_b.checked = null;//Uncheck    //dom_b.checked = undefined;//Uncheck
  }
  //Use jQuery operation  function fn2(){
    var jQ_a = $('#a2');
    var jQ_b = $("#b2");
    //Tick    jQ_a.prop('checked','abc');
    //jQ_a.prop('checked','123');
    //jQ_a.prop('checked','true');
    //jQ_a.prop('checked',true);
    //jQ_a.prop('checked',123);//The number can    //jQ_a.prop('checked',-1);
    //jQ_a.prop('checked',abc);//An error will be reported, abc is not defined {so predict that checked can be selected as long as there is a defined value (undefined means undefined)}    //Uncheck    jQ_b.prop('checked','');
    //jQ_b.prop('checked',false);
    //jQ_b.prop('checked',null);
    //jQ_b.prop('checked',undefined);//No effect, no error will be reported;  }

</script>
<style>
  .own{
    border:solid 2px red;
    padding:20px 5px 20px 40px;
    width:300px;
    margin:80 0 0 500;
  }
</style>
<head>
<body>
<!--
  Through experiments, we learned:
    Initialize the radio box to select4This method can be achieved:
    1、checked
    2、checked='checked'(This method is recommended,This method can have good compatibility with the browser)
    3、checked='true'
    4、checked=true
    Tips:By givingcheckedAttribute copy,if onlycheckedexist,
      Assign any value to initialize the selection(eg:checked='aaa' or checked='false')
      Initialization selection can be achieved without assignment
    Test success stories:
      [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
      [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

    When multiple are selected,The last radio box selected is the last one
-->

<div class='own'>
<label>A1</label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>Test click</button>
</div>

<div class='own'>
<label>A2</label><input id='a2' type='radio' value='1' name='test2' />
<label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2</label><input id='c2' type='radio' value='3' name='test2' />
<label>D2</label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>Test click</button>
</div>

</body>
</html>

The above article uses native js and jQuery to check and cancel the check and cancel the radio box operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.