Question

我有一个包含几种成分的表格。我希望用户能够选择3并且不超过3.因此，如果他们勾选3，那么表单将不再允许，但他们可以取消选择并选择另一个。

此刻虽然它没有阻止一个方框被勾选并且不计算一个未记录。

我的javascript

<script type="text/javascript">
    var total = 0;
        function check() {
            if( $("input#name").checked = true )
                { 
                    total = total + 1;
                }
            if( $("input#name").checked = false )
                { 
                    total = total - 1;
                }
            if(total > 3)
                {
                    alert("Please Select only three")
                    $("input#name").checked = false ;
                    return false;
                }
        }
</script>

和我的表格

<form name="ingredientlist" method="post" action="checkboxdone.php">
        <label>Pork</label><input type="checkbox" name="ckb" value="pork" onclick="check();"/><br/>
        <label>Carrot</label><input type="checkbox" name="ckb" value="carrot" onclick="check();"/><br/>
        <label>Whiskey</label><input type="checkbox" name="ckb" value="whiksey" onclick="check();"/><br/>
        <label>Bacon</label><input type="checkbox" name="ckb" value="bacon" onclick="check();"/><br/>
        <label>Leek</label><input type="checkbox" name="ckb" value="leek" onclick="check();"/><br/>
        <label>Potato</label><input type="checkbox" name="ckb" value="potato" onclick="check();"/><br/>
        <input id="button" type="submit" value="Submit" name="button"/>
</form>

Answer 1

如果你愿意使用jQuery，你可以一次性计算它们并用一个小函数来控制它们：

$('input[type=checkbox]').click(function() {
    if (this.checked) {
        if ($('input[type=checkbox]:checked').length > 3) {
            this.checked = false;
            return false;
        }
    }
});

也许其他人正在为你构建一个非jQuery的答案。这是一个JSFiddle示例。

Answer 2

将其插入您的代码中，它只会运行。

$(document).ready(function(){
  var totalChecked = 0;
  $('form[name="ingredientlist"] > input[type="checkbox"]').change(function(){
      if (!this.checked) { //unchecking
          totalChecked--;
      } else if (totalChecked < 3) { //checking, with less than 3 checked
          totalChecked++;
      } else { //checking, with 3 checked
          this.checked = false;
      }
  });
});

http://jsfiddle.net/W9gNg/1/

Answer 3

首先给复选框提供ID并挂钩onchange，而不是onclick

<form name="ingredientlist" method="post" action="checkboxdone.php">
        <label>Pork</label><input type="checkbox" name="ckb" value="pork" id="ckb_pork" onchange="check();"/><br/>
        <label>Carrot</label><input type="checkbox" name="ckb" value="carrot" id="ckb_carrot" onchange="check();"/><br/>
        <label>Whiskey</label><input type="checkbox" name="ckb" value="whiksey" id="ckb_whiksey" onchange="check();"/><br/>
        <label>Bacon</label><input type="checkbox" name="ckb" value="bacon" id="ckb_bacon" onchange="check();"/><br/>
        <label>Leek</label><input type="checkbox" name="ckb" value="leek" id="ckb_leek" onchange="check();"/><br/>
        <label>Potato</label><input type="checkbox" name="ckb" value="potato" id="ckb_potato" onchange="check();"/><br/>
        <input id="button" type="submit" value="Submit" name="button"/>
</form>

接下来做

//global scope
var ckb={pork: false, carrot: false, whiksey: false, bacon: false, leek: false, potato: false}

function check() {
  var checked=0;
  for (var ck in ckb) {
    //Cache DOM reference
    if (!ckb[ck]) ckb[ck]=document.getElementById('ckb_'+ck);
    if (ckb[ck].checked) checked++;
  }

  if (checked>=3) {
    for (var ck in ckb) {
      if (!ckb[ck].checked) ckb.disabled=true;
    }
  }
}

Answer 4

这是一个小提示，展示了如何实现它：http://jsfiddle.net/nCges/

限制可以隐藏在javascript中的复选框？

4 个答案: