mardi 21 avril 2015

Variable limit number of checkboxes

I would like to limit number of checkboxes not with a fix number (i.e.2), but I want pre-select this limit.

I'm able to limit in a fix way (working example)

 <p>Select your favorite countries below:</p>

<form id="world" name="world">
Select the limit<select id="limit" onchange="this.form.submit()"><option value="1">1</option><option value="2">2</option></select><br/>
 <input type="checkbox" name="countries" /> USA<br />
 <input type="checkbox" name="countries" /> Canada<br />
 <input type="checkbox" name="countries" /> Japan<br />
 <input type="checkbox" name="countries" /> China<br />
<input type="checkbox" name="countries" /> France<br />
</form>


function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].onclick=function(){
    var checkedcount=0
    for (var i=0; i<checkgroup.length; i++)
        checkedcount+=(checkgroup[i].checked)? 1 : 0
    if (checkedcount>limit){
        alert("You can only select a maximum of "+limit+" checkboxes")
        this.checked=false
        }
    }
}
}


checkboxlimit(document.forms.world.countries, 2)

but I'm not able to to change the limit in this variable way (not working)

<p>Select your favorite countries below:</p>

<form id="world" name="world">
Select the limit<select id="limit" onchange="this.form.submit()"><option value="1">1</option><option value="2">2</option></select><br/>
<input type="checkbox" name="countries" /> USA<br />
<input type="checkbox" name="countries" /> Canada<br />
<input type="checkbox" name="countries" /> Japan<br />
<input type="checkbox" name="countries" /> China<br />
<input type="checkbox" name="countries" /> France<br />
</form>



function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].onclick=function(){
    var checkedcount=0
    for (var i=0; i<checkgroup.length; i++)
        checkedcount+=(checkgroup[i].checked)? 1 : 0
    if (checkedcount>limit){
        alert("You can only select a maximum of "+limit+" checkboxes")
        this.checked=false
        }
    }
}
}

var e = document.getElementById("limit");
var limit = e.options[e.selectedIndex].value;
checkboxlimit(document.forms.world.countries, limit)




Aucun commentaire:

Enregistrer un commentaire