Question

我正在尝试复制复选框上的单选按钮行为。我想要做的是在任何给定的时间至少应该检查一个复选框。所以场景是 1）选中所有复选框 2）先检查一下 3）检查第二个

但从未同时取消选中。我创造了一个小提琴并试图去做。如果有人能提供见解，那就太棒了。

<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>

http://jsfiddle.net/N3w8Z/76/

由于

Answer 1

这个plunker演示了如何在angularJS中解决这个问题。

http://plnkr.co/edit/tHIGDmVljpHyA044xQTd?p=preview

解决方案的核心涉及此函数，它迭代集合以确保至少有一个值设置为true。

this.testCollection = function(thingsList){
  return thingsList.some(function(thing){
    return thing.value === true;
  });
}

Answer 2

你可以用jQuery或js逻辑当你选择一个复选框make other unselected

DEMO

$(".sel").each(function()
{
    $(this).change(function()
    {
        $(".sel").prop('checked',false);
        $(this).prop('checked',true);
    });
});


<div ng-app="app">
<div class="form-horizontal form-group">
    <label class="form-horizontal col-xs-3">Media:</label>
    <input class="form-horizontal col-xs-1 sel" name="grp" type="checkbox" ng-model="disablelist" ng-init="disablelist=true">
    <label class="form-horizontal col-xs-2">Play Music</label>
    <input class="form-horizontal col-xs-1 sel" name="grp" type="checkbox" ng-model="disableprofile">
    <label class="form-horizontal col-xs-3">Play Movie</label><br><br>
</div>

</div>

Answer 3

由于它是Angular应用程序，您可以试试这个

Demo

function MyController($scope){ $scope.changeFn = changeFn; function changeFn(){ if(!$scope.disablelist && !$scope.disableprofile){ $scope.disablelist = true; } } }

Answer 4

我使用了一些vanilla javascript来实现你所追求的行为。将此代码包装在函数中，并将其挂钩到输入的onclick事件。添加到你的小提琴：http://jsfiddle.net/6e2jzxbx/

var inputs = document.getElementsByTagName('input');
var oneActive = false;

for(var i = 0; i < inputs.length; i++){
    if(inputs[i].checked == true){
        oneActive = true;
    }

    if(!oneActive){
        inputs[1].checked = true;
    }
}

具有单选按钮类型行为的复选框

4 个答案: