radio button in a table checked and unchecked

Question

I have a radio button in table and I want to implement select all functionality for radio button based on name. This is my code:

var checked = false;

$scope.acceptOrRejectAllOrders = function(selectedVal) {
  if (selectedVal == 'Accept all') {
    jQuery("#bundleAcceptAll").attr('checked', 'checked');

    // $("#bundleAcceptAll").prop("checked", true);
    //$("#bundleAcceptAll").attr('checked', 'checked');

    var aa = document.getElementsByName("bundleAcceptAll");
    for (var i = 0; i < aa.length; i++) {
      document.getElementsByName(bundleAcceptAll).checked = true;
    }

    //$scope.quoteRequest.quotationRequestItems[0].quotes.length
  } else {
  }
};

<div style="border:1px #f5f4f4 solid;background: #f9f9f9;" ng-repeat="(key,quoteAndOrder) in getQuotesAndOrders()">
  <div style="background: #fff;">
    <table border="0" style="width: 100%;" class="table table-striped">
      <thead>
        <tr style="background: #ff7900;color: #fff;">
          <th>Quote ID</th>
          <th>{{key}}</th>
        </tr>
        <tr>
          <th>Accept or Reject Orders:</th>
          <th>
            <span style="float: left;background: #f9f9f9;">
              <input type="radio" name ="bundleAcceptAll" ng-change="" class="radioSignatory" value="Approve Order" ng-disabled=""> 
              <p class="labelRadioSignatory">Approve Order</p>
              <input type="radio" name ="bundleRejectAll"  ng-change="" class="radioSignatory" value="Reject Order" ng-disabled=""> 
              <p class="labelRadioSignatory">Reject Order</p>
            </span>
          </th>
        </tr>
      </thead>
      <tr ng-repeat="odr in quoteAndOrder">
        <td> {{odr.id}} </td>
        <td>{{odr.status}}</td>
      </tr>
    </table>
    <hr>
  </div>
</div>

I am not able to select all radio buttons with name bundleAcceptAll. It is basically a list in which each row will have a radio button. I want all radio buttons in the list to be selected. Only one button gets selected

Answer 1

AFAIK if you choose radio button and use the same name it will treated as group that will only one item selected. Perhaps you could just change it into checkbox.

Answer 2

 function oncheckClick() { $('input[name=chkBox]').prop('checked',true) } function onUnCheckClick() { $('input[name=chkBox]').prop('checked',false) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="chkBox"> <button id="check" onclick="oncheckClick()" value="Check">Check</button> <button id="check" onclick="onUnCheckClick()" value="UnCheck">UnCheck</button> 

if it is list, you can loop through the list and check or uncheck

$("input[type=radio][name='" + name + "']").each(function() {
//code here

});

Answer 3

As was mentioned above, it's not radio button functionality to have multiple items checked, it's checkboxes. But you can style checkboxes so they would look like radiobuttons. See for example: How to make a checkbox in circle shape with custom css?