Question

我有一个“报名表”，通常有32个选项，其中每个只能选择1个，所以实际上总共可以选择16个。（这些数字可能会有所不同，一周又一周......想想足球比赛）我想做的是限制这一点，以便最多只能选择8个。

我有一段javascript，检查是否已经选择了所有，并告诉用户他们是否还没有...但我试图稍微修改它以便它只允许用户选择8个选项

这是javascript：

<script type="text/javascript">
            function checkform() {
                //make sure all picks have a checked value
                var f = document.entryForm;
                var allChecked = true;
                var allR = document.getElementsByTagName('input');
                for (var i=0; i < allR.length; i++) {
                    if(allR[i].type == 'radio') {
                        if (!radioIsChecked(allR[i].name)) {
                            allChecked = false;
                        }
                    }      
                }
                if (!allChecked) {
                    return confirm('Not all picks entered... Submit anyway?');
                }
                return true;
            }
            function radioIsChecked(elmName) {
                var elements = document.getElementsByName(elmName);
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].checked) {
                        return true;
                    }
                }
                return false;
            }
            </script>

有没有办法做到这一点，还是我以错误的方式看待它？

Answer 1

这应该有效并允许您传递允许的最大选择次数：

<script>
    function checkform(maxPicks) {
  maxPicks = maxPicks || 8; //default

  //make sure all picks have a checked value
  var checkedCount = 0;
  var allR = document.getElementsByTagName('input');

  for(var i = 0; i < allR.length; i++) {
    var rad = allR[i];

    if (rad.checked) checkedCount++;
  }

  if (checkedCount < maxPicks) {
    return confirm('Not all picks entered... Submit anyway?');
  } else if (checkedCount > maxPicks) {
    alert('You may only choose up to ' + maxPicks + ' picks.');
    return false;
  }
  return true;
}
</script>

Answer 2

我会使用复选框而不是单选按钮。单选按钮意味着只能选择一个，而复选框意味着可以选择多个。

然后，最简单的方法是检查每当一个值的变化时选择了多少。如果选择的数字等于最大值，请禁用其余数字。这允许用户仍然取消选择已经选择的任何内容，但是他们将无法添加任何新选择。

当所选的数量小于最大值

时，您还需要重新启用

var inputs = document.getElementsByTagName("input");

for(var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = checkFunc;
}

function checkFunc() {
    count = 0;
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].checked === true){
            count++;
        }
    }
    if (count > 3) {
        for(i = 0; i < inputs.length; i++) {
            if(inputs[i].checked === false){
                inputs[i].disabled = true;
            }
        }
    } else {
        for(i = 0; i < inputs.length; i++) {
            inputs[i].disabled = false;
        }
    }

}

工作JSFiddle。这不一定是最有效的实现，但展示了它的工作方式。

Javascript限制单选按钮选择的数量

2 个答案: