简体   繁体   中英

How to set property of radio button to checked

There are two radio buttons in my code:

<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
  <label for="production">Production</label>

<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
  <label for="operation">Operations</label>

And there are more radio buttons after:

<div class="prod">
  <h2>Production</h2>
    <label><b>Project Captain: <small id="small">*</small></b></label>
    <input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
    <input type="radio" class="projCap" ng-model="formData.projCap" value="no">No

    <label><b>Supervisor: <small id="small">*</small></b></label>
    <input type="radio" ng-model="formData.supervisor" value="yes">Yes
    <input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>

<div class="op">
  <h2>Operations</h2>
    <label><b>Manager: <small id="small">*</small></b></label>
    <input type="radio" ng-model="formData.mngr" value="yes">Yes
    <input type="radio" ng-model="formData.mngr" value="no">No   

    <label><b>Assistant Manager: <small id="small">*</small></b></label>
    <input type="radio" ng-model="formData.asMngr" value="yes">Yes
    <input type="radio" ng-model="formData.asMngr" value="no">No  <br><br>
</div>

I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op . If Operations all radio buttons with value no should be selected inside div prod .

My function in controller:

$scope.division = function(event) {
  if(event.target.id === 'production'){
    $('.op').find('input:radio').prop('checked', true);
    $('.prod').find('input:radio').prop('checked', false);
  }else{
    $('.prod').find('input:radio').prop('checked', true); 
    $('.op').find('input:radio').prop('checked', false);
  }  
};

It will select both yes and no values: 在此输入图像描述

How can I auto select only radio buttons with no value?

Try this:

$('.op').find('input:radio[value="no"]').prop('checked', true);

and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.

Check this example:

 $(document).ready(function(){ $('.op').find('input:radio[value="no"]').prop('checked', true); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="op"> <h2>Operations</h2> <label><b>Manager: <small id="small">*</small></b></label> <input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes <input type="radio" name="group1" ng-model="formData.mngr" value="no">No <label><b>Assistant Manager: <small id="small">*</small></b></label> <input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes <input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM