限制用户选中要检查的复选框数量

时间:2016-06-23 10:40:35

标签: javascript arrays forms function checkbox

我正在尝试开发一个页面,其中有许多复选框,但用户仅限于检查2个复选框。我得到了这个代码,但它没有工作,因为我给它一个名字作为数组。请在调用javascript函数时建议如何使用此名称作为复选框。

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.seatdata, 2);
<form id="world" name="world">
<table>
<tr>
<td>
  <input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
  <label for="A11">A11</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|11' id="A10"  />
  <label for="A10">A10</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|10' id="A9"  />
  <label for="A9">A9</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|9' id="A8"  />
  <label for="A8">A8</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|6' id="A7"  />
  <label for="A7">A7</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|5' id="A6"  />
  <label for="A6">A6</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|4' id="A5"  />
  <label for="A5">A5</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|3' id="A4"  />
  <label for="A4">A4</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
  <label for="A3">A3</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
  <label for="A2">A2</label>
</td>
<td>
  <input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
  <label for="A1">A1</label>
</td>
</tr>
</table>
</form>

4 个答案:

答案 0 :(得分:2)

只需更改此行

即可

checkboxlimit(document.forms.world.seatdata, 2);checkboxlimit(document.forms.world["seatdata[]"], 2);

或使用document.getElementsByName

checkboxlimit(document.getElementsByName("seatdata[]"), 2);

答案 1 :(得分:1)

纯粹的javascript -

checkboxlimit(document.getElementsByName("seatdata[]"), 2);

对于jQuery用户 -

HTML code-

<input type="checkbox" class="abc" />hello1
<input type="checkbox" class="abc" />hello2
<input type="checkbox" class="abc" />hello3
<input type="checkbox" class="abc" />hello4
<input type="checkbox" class="abc" />hello5
<input type="checkbox" class="abc" />hello6
<input type="checkbox" class="abc" />hello7
<input type="checkbox" class="abc" />hello8

Jquery代码 -

var limit = 2;
var count = 0;
$('.abc').change(function(){
    count++;
    if(count > limit){
      alert("You cant select more than "+limit+" checkboxes");
      this.checked=false;
    }
});

答案 2 :(得分:0)

你能否使用

String test = "Ch\u00e0o bu\u1ed5i s\u00e1ng";
textView.setText(unicode2String(test));

答案 3 :(得分:-1)

是。您可以使用a[0]功能

来限制用户
displayangle = function(){
    for (i=1; i<3; i++) {
        a[i].setAttribute({visible:false});
    }
    for (i=1; i<3; i++) {
        if (Math.abs(a[i].Value() - 2*a[0].Value()) < 0.00001) {
            a[i].setAttribute({visible:true, withLabel:true});
        }
    }
}

以下是Jsfiddle

希望有所帮助:)