javascript - 如果选中的复选框超过 3 个，如何取消选中一个复选框

Question

我有这个表格：

<form name ='vote' action='' method='POST'>
    while ($row = mysql_fetch_array($result)){
       <input type='checkbox' name='things[]' value='".$row['name_song']."'
              name='send' onClick='anyCheck(this.form)'>
    } 
    <input type='submit' value='test' name='send'></form>

我必须做些什么才能使人们可以投票的最大次数（ t ）成为整数？我希望将值传递给 anyCheck 函数，例如 $maxvotes。

<script type="text/javascript"> 
   function anyCheck(f, e) {
      e = e || window.event;
      var t = 0;
      var c = f['things[]'];
      for (var i = 0; i < c.length; i++) {
         c[i].checked ? t++ : null;
      }
      if (t == 3) {
         alert("Daugiausiai galite balsuoti už triks kūrinius")
         var targ = event.target || event.srcElement;
         targ.checked = false;
      }
   }
</script>

Answer 1

由于anyCheck是从事件处理程序调用的，因此将event对象传递给anyCheck()函数，获取事件的目标，并将其.checked属性设置为false.

<input ...  onClick='anyCheck(this.form, event)'>

---

function anyCheck(f, e) {

    var t = 0;
    var c = f['things[]'];
    for (var i = 0; i < c.length; i++) {
        c[i].checked ? t++ : null;
    }
    if (t == 3) {
        alert("You can choose a maximum of 2" + name + "haha");

        (event.target || event.srcElement).checked = false;
    }
}

---

或者由于处理程序是直接绑定的，您可以this改为传递。

<input ...  onClick='anyCheck(this)'>

---

function anyCheck(box) {

    var t = 0;
    var c = box.form['things[]'];
    for (var i = 0; i < c.length; i++) {
        c[i].checked ? t++ : null;
    }
    if (t == 3) {
        alert("You can choose a maximum of 2" + name + "haha");

        box.checked = false;
    }
}

Answer 2

此解决方案需要 jQuery，尽管您可以将其重新设计为不需要 jQuery 选择器：

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script type="text/javascript">
  $(document).on("click", "input[type=checkbox]", function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
      alert("sorry, you have already selected 3 checkboxes!");        
      $(e.target).prop('checked', false);
    }
  });
</script>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

作为一个jsfiddle：http: //jsfiddle.net/RF5Ls/