选中并取消选中表格中的单选按钮

时间:2017-03-10 08:50:04

标签: javascript jquery html angularjs

我在表格中有一个单选按钮,我想根据名称为单选按钮实现选择所有功能。这是我的代码:

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>

我无法选择名称为bundleAcceptAll的所有单选按钮。它基本上是一个列表,其中每一行都有一个单选按钮。我希望选择列表中的所有单选按钮。只选择了一个按钮

3 个答案:

答案 0 :(得分:0)

AFAIK如果您选择单选按钮并使用相同的名称,它将被视为仅选择一个项目的组。也许你可以把它改成复选框。

答案 1 :(得分:0)

&#13;
&#13;
function oncheckClick()
{
$('input[name=chkBox]').prop('checked',true)
}

function onUnCheckClick()
{
$('input[name=chkBox]').prop('checked',false)
}
&#13;
<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>
&#13;
&#13;
&#13;

如果是列表,您可以遍历列表并选中或取消选中

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

});

答案 2 :(得分:0)

如上所述,检查多个项目不是单选按钮功能,而是复选框。但你可以设置复选框样式,使它们看起来像radiobuttons。例如,请参阅:How to make a checkbox in circle shape with custom css?