限制允许选中的复选框的数量

Limit the number of check-boxes allowed to be checked

本文关键字：复选框 许选中      更新时间：2023-09-26
function CountChecks(whichlist,forarray,maxchecked,latestcheck) {
// An array containing the id of each checkbox to monitor. 
//   List the id of each checkbox in the set. If more than 
//   one set, list other sets in their own arrays. The
//   array name to use is passed to this function.

*// THIS PART IMPORTANT*//

var listone = new Array("1", "2", "3", "4", "5", "6");

*// THIS PART IMPORTANT*//

// End of customization.
var iterationlist;
eval("iterationlist="+whichlist);
var count = 0;
for( var i=0; i<iterationlist.length; i++ ) {
   if( document.getElementById(iterationlist[i]).checked == true) { count++; }
   if( count > maxchecked ) { latestcheck.checked = false; }
   }
if( count > maxchecked ) {
   alert('Sorry, only ' + maxchecked + ' may be checked.');
   }
}

这是你可以看到CHECKBOX CHECK limit ..你可以看到它的功能。我想把这个从页面发送到js文件。但由于数组部分，它的功能不是很好。它必须创建一个又一个数组。我添加了变量函数部分'forarray'..我不知道javascript，我问你它必须是这样的，当它创建自己的数组。

var {whichlist variable} = new Array({forarray variable list});

和这样的HTML代码

  <p>
Check up to 3 sizes:<br>
<input id='1' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','1',3,this)" value="2x2">2x2 
<input id='2' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','2',3,this)" value="2x2.5">2x2.5 
<input id='3' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','3',3,this)" value="2x3">2x3 
<input id='4' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','4',3,this)" value="2.5x2.5">2.5x2.5 
<input id='5' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','5',3,this)" value="2.5x3">2.5x3 
<input id='6' type="checkbox" name="boxsize[]" onclick="CountChecks('listone','6',3,this)" value="3x3">3x3
</p>
<p>
Check up to 2 colors:<br>
<input id='7' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo','7',2,this)" value="red">Red 
<input id='8' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo','8',2,this)" value="gold">Gold 
<input id='9' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo','9',2,this)" value="green">Green 
<input id='10' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo','10',2,this)" value="silver">Silver 
<input id='11' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo','11',2,this)" value="blue">Blue 
</p>

您不需要做所有这些。您所需要做的就是将对元素的引用传递到函数中，然后使用它的名称来查询它的兄弟元素列表。计算复选框的数量，并防止任何其他复选框被选中。

<p>
    Check up to 3 sizes:<br>
    <input id='1' type="checkbox" name="listone" onclick="javascript:checkNumChecked(this, 3)"
        value="2x2">2x2
    <input id='2' type="checkbox" name="listone" onclick="checkNumChecked(this,3)" value="2x2.5">2x2.5
    <input id='3' type="checkbox" name="listone" onclick="checkNumChecked(this,3)" value="2x3">2x3
    <input id='4' type="checkbox" name="listone" onclick="checkNumChecked(this,3)" value="2.5x2.5">2.5x2.5
    <input id='5' type="checkbox" name="listone" onclick="checkNumChecked(this,3)" value="2.5x3">2.5x3
    <input id='6' type="checkbox" name="listone" onclick="checkNumChecked(this,3)" value="3x3">3x3
</p>
<p>
    Check up to 2 colors:<br>
    <input id='7' type="checkbox" name="listtwo" onclick="checkNumChecked(this,2)" value="red">Red
    <input id='8' type="checkbox" name="listtwo" onclick="checkNumChecked(this,2)" value="gold">Gold
    <input id='9' type="checkbox" name="listtwo" onclick="checkNumChecked(this,2)" value="green">Green
    <input id='10' type="checkbox" name="listtwo" onclick="checkNumChecked(this,2)" value="silver">Silver
    <input id='11' type="checkbox" name="listtwo" onclick="checkNumChecked(this,2)" value="blue">Blue
</p>
<script>
    function checkNumChecked(ele, limit) {
        var ct = 0, siblings = document.getElementsByName(ele.name), checked = 0;
        for (ct = 0; ct <= siblings.length - 1; ct++) {
            checked += (siblings[ct].checked) ? 1 : 0
            if (checked > limit) {
                siblings[ct].checked = false
                alert('Sorry, only ' + limit + ' item(s) may be checked.');
                break;
            }
        }
    }
</script>

然而，提醒对终端用户来说很烦人。一种更好的方法是在达到限制后禁用其他复选框，并在未选中复选框时重新启用它们。

<script>
    function checkNumChecked(ele, limit) {
        var ct = 0, siblings = document.getElementsByName(ele.name), checked = 0;
        for (ct = 0; ct <= siblings.length - 1; ct++) {
            checked += (siblings[ct].checked) ? 1 : 0
        }
        for (ct = 0; ct <= siblings.length - 1; ct++) {
            siblings[ct].disabled = siblings[ct].checked ? false : (checked == limit) ? true : false
        }
    }
</script>

有相同的，但使它只使用id工作，你可以这样做:

<script>
    function checkNumChecked(ele, limit) {
        var ct = 0, siblings = [], checked = 0, item_num = parseInt(ele.id),
        sct = (item_num < 7) ? 1 : 7, ect = (item_num < 7) ? 6 : 11;
        for (ct = sct; ct <= ect; ct++) {
            siblings.push(document.getElementById(ct));
        }
        for (ct = 0; ct <= siblings.length - 1; ct++) {
            checked += (siblings[ct].checked) ? 1 : 0
        }
        for (ct = 0; ct <= siblings.length - 1; ct++) {
            siblings[ct].disabled = siblings[ct].checked ? false : (checked == limit) ? true : false
        }
    }
</script>
相关文章：