我想限制复选框的数量,但不使用固定数量(即 2),但我想预先选择此限制。
我可以限制在 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)
但我无法更改此 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)
最佳答案
这是一个可能的解决方案:https://jsfiddle.net/g6cyegnt/1/
您所要做的就是不要在限制控制的更改事件上提交表单。单独处理change事件,如代码/fiddler所示。
<p>Select your favorite countries below:</p>
<form id="world" name="world">
Select the limit<select id="limit"><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
}
}
}
}
$('input[name="countries"]').on('change', function(){
var limit = $('#limit').find(':selected').val();
checkboxlimit(document.forms.world.countries, limit)
});
关于javascript - 复选框数量可变限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29778069/