CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
Crystal
Crystal

Reputation: 11

Limit the number of check-boxes allowed to be checked

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.');
   }
}

This is you can see CHECKBOX CHECK LIMITER.. And you can see works with function. I wanna do send this to js file from the page.. but Its not very functional becouse of array part. It has to create array's own by own.. I add the variable function part 'forarray'.. I dont know javascript and Im asking you it has to be like this when it create own arrays. 

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

And HTML code like this.

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

Upvotes: 0

Views: 97

Answers (1)

Joshua Dannemann
Joshua Dannemann

Reputation: 2080

You do not need to do all of that. All you need to do is pass a reference to the element into the function and then use its name to query a list of its siblings. Count the number of checked boxes and prevent any others from being checked.

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

However, alerts are annoying to end users. A much better way of doing this is to disable the other check boxes once the limit has been reached and re-enable them when a box is unchecked.

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

To have the same, but make it work using only ids you can do the following:

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

Upvotes: 1

Related Questions