0

I have this plunk file. In my code, I want to create 4 radio buttons but i dont know why all the radio buttons are checked when it is meant to be only one radio button checked.

http://plnkr.co/edit/IbtUGzuATbcSCmoDMH73

 <div class="row">
          <label class="col-sm-3">Choose Service Category:</label>
          <div class="col-sm-9">
              <div class="col-sm-3">
                <input type="radio" ng-model="">
                <label>Adhoc</label>
                <br/>
                <span>(One Time Service)</span>
              </div>
              <div class="col-sm-3">
                <input type="radio" ng-model="">
                <label>Semi-monthly</label>
                <br/>
                <span>(Every 2 Weeks)</span>
              </div>
              <div class="col-sm-3">
                <input type="radio" ng-model="">
                <label>Monthly</label>
                <br/>
                <span>(Once a Month)</span>
              </div>
              <div class="col-sm-3">
                <input type="radio" ng-model="">
                <label>Weekly</label>
                <br/>
                <span>(Once a Week)</span>
              </div>
          </div> 


    </div>
chimos
  • 664
  • 2
  • 14
  • 34
Kingsley Simon
  • 2,090
  • 5
  • 38
  • 84

1 Answers1

2

They lack a "name" attribute. To make radio buttons work together, they need to have the same "name" HTML attribute:

<div class="row">
      <label class="col-sm-3">Choose Service Category:</label>
      <div class="col-sm-9">
          <div class="col-sm-3">
            <input type="radio" name="radio-group" ng-model="">
            <label>Adhoc</label>
            <br/>
            <span>(One Time Service)</span>
          </div>
          <div class="col-sm-3">
            <input type="radio" name="radio-group" ng-model="">
            <label>Semi-monthly</label>
            <br/>
            <span>(Every 2 Weeks)</span>
          </div>
          <div class="col-sm-3">
            <input type="radio" name="radio-group" ng-model="">
            <label>Monthly</label>
            <br/>
            <span>(Once a Month)</span>
          </div>
          <div class="col-sm-3">
            <input type="radio" name="radio-group" ng-model="">
            <label>Weekly</label>
            <br/>
            <span>(Once a Week)</span>
          </div>
      </div> 


</div>
chimos
  • 664
  • 2
  • 14
  • 34