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

Question

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 LIMITER.. 你可以看到有功能的作品。我想把它从页面发送到 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>

Answer 1

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

<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>