Javascript单选按钮限制数量

Question

I have a an "entry form" with usually 32 choices, of which only 1 per can be chosen, so in total, 16 can actually be chosen. (these numbers can vary slightly, week by week... think football games) What I want to do is limit this so that only a maximum of 8 can be chosen.

I have a piece of javascript that checks to see if all have been chosen, and tells the user if they have not... but I was trying to modify it a bit so that it will only allow the user select 8 choices.

Here is the 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>

Is there a way to do this or am I looking at it the wrong way?

Answer 1

This should work and allow you to pass in the maximum number of picks allowed:

<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

I would use checkboxes instead of radio buttons. Radio buttons imply that only one can be selected while checkboxes imply that multiples can be selected.

Then the simplest thing to do is check how many are selected whenever the value of one changes. If the number that are selected is equal to your maximum, disable the rest. This allows the user to still deselect any that are already selected, but they will not be able to add any new selections.

You'll also want to re-enable when the number of selected are less than the max.

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;
        }
    }

}

Working JSFiddle . This is not necessarily the most efficient implementation but shows how it would work.