一段时间以来,我一直在尝试让复选框数组的前4个像单选按钮一样工作,我以为我已经做到了,但我想不通。。我在这里找了一遍,发现。。复选框的作用类似于单选按钮,选中前四个或最后四个复选框,但不能同时选中-javascript?
尽管我显然还没能让它在我的情况下发挥作用。所以要重新迭代。我需要前4个,你只能选择1个,而其他的可以是任何组合的倍数。我知道这是我一定要错过的一件小事。
HTML
<form name="account_info" id="account_info">
<input type="checkbox" name="permissions[]" value="0" onClick="checkOnly(this)"> Permission 0<br>
<input type="checkbox" name="permissions[]" value="1" onClick="checkOnly(this)"> Permission 1<br>
<input type="checkbox" name="permissions[]" value="2" onClick="checkOnly(this)"> Permission 2<br>
<input type="checkbox" name="permissions[]" value="3" onClick="checkOnly(this)"> Permission 3<br>
<input type="checkbox" name="permissions[]" value="4"> Permission 4<br>
<input type="checkbox" name="permissions[]" value="5"> Permission 5<br>
<input type="checkbox" name="permissions[]" value="6"> Permission 6<br>
<input type="checkbox" name="permissions[]" value="7"> Permission 7<br>
</form>
脚本
function checkOnly(myCheckbox) {
for(var i = 0; i < 4; i++) {
if(document.account_info.elements[i].name != myCheckbox.name) {
document.account_info.elements[i].checked = false;
}
}
}
这是jsfiddle的链接http://jsfiddle.net/np4dry0f/3/
问题是,在javascript中,name
属性将始终是permissions[]
。
一个可能的解决方案是使用值而不是名称:
function checkOnly(myCheckbox) {
for(var i = 0; i < 4; i++) {
if(document.account_info.elements[i].value != myCheckbox.value) {
document.account_info.elements[i].checked = false;
}
}
}
请参阅JS Bin上的示例。
比循环通过每个复选框要容易得多
$('.radio').change(function() {
$('.radio').not(this).removeAttr('checked');
$(this).attr('checked','checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="account_info" id="account_info">
<input class="radio" type="checkbox" name="permissions[]" value="0"> Permission 0<br>
<input class="radio" type="checkbox" name="permissions[]" value="1"> Permission 1<br>
<input class="radio" type="checkbox" name="permissions[]" value="2"> Permission 2<br>
<input class="radio" type="checkbox" name="permissions[]" value="3"> Permission 3<br>
<input class="radio" type="checkbox" name="permissions[]" value="4"> Permission 4<br>
<input class="radio" type="checkbox" name="permissions[]" value="5"> Permission 5<br>
<input class="radio" type="checkbox" name="permissions[]" value="6"> Permission 6<br>
<input class="radio" type="checkbox" name="permissions[]" value="7"> Permission 7<br>
</form>