javascript - Check boxes: Allow for only one check box to be click at a time - Stack Overflow

admin管理员组

文章数量:1406060

I am currently working with check boxes and displaying values based on the values chosen. Almost everything is working in exception that i have to check boxes for method of shipping. Right now the user can select two ways and this is an issue. Is there a way to only allow one check box to be checked for method of shipping? EXAMPLE

JS

<script>
function check_value(currentElement, val, id, type) {
    var el = document.getElementById("imgBox" + id);
    if (val > 0 && val < 4) { //will trigger when [1,2,3]

        if(currentElement.checked)
        {
            el.src = "images/" + type + val + ".jpg";
            el.style.display = "";
        }
        else
        {
            el.src = "";
            el.style.display = "none";
        }

    }
}    
</script>

HTML

<h2>Choose method of shipping</h2>
<form name="shipping_list">
    <input type="checkbox" name="shipping1" onclick='check_value(this, 1, "4", "shipping")'/> USPS Ground<br />
    <input type="checkbox" name="shipping2" onclick='check_value(this, 2, "4", "shipping")'/> FedEx         
</form>

<img id="imgBox4" src="#" style="display:none">

I am currently working with check boxes and displaying values based on the values chosen. Almost everything is working in exception that i have to check boxes for method of shipping. Right now the user can select two ways and this is an issue. Is there a way to only allow one check box to be checked for method of shipping? EXAMPLE

JS

<script>
function check_value(currentElement, val, id, type) {
    var el = document.getElementById("imgBox" + id);
    if (val > 0 && val < 4) { //will trigger when [1,2,3]

        if(currentElement.checked)
        {
            el.src = "images/" + type + val + ".jpg";
            el.style.display = "";
        }
        else
        {
            el.src = "";
            el.style.display = "none";
        }

    }
}    
</script>

HTML

<h2>Choose method of shipping</h2>
<form name="shipping_list">
    <input type="checkbox" name="shipping1" onclick='check_value(this, 1, "4", "shipping")'/> USPS Ground<br />
    <input type="checkbox" name="shipping2" onclick='check_value(this, 2, "4", "shipping")'/> FedEx         
</form>

<img id="imgBox4" src="#" style="display:none">

• javascript

Share Improve this question Follow asked Sep 8, 2012 at 18:46 user1434156user1434156

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You should use radio buttons instead:

<form name="shipping_list">
    <input type="radio" name="shipping" id="shipping1" onclick='check_value(this, 1, "4", "shipping")'/> USPS Ground<br />
    <input type="radio" name="shipping" id="shipping2" onclick='check_value(this, 2, "4", "shipping")'/> FedEx         
</form>

The key is the name attribute, the value should be same for all the radio buttons that belong to one group.

How about radio buttons?

<input type="radio" name="shipping" onclick="check_value(this, 1, '4', 'shipping');">

$(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
  });
});

本文标签： javascriptCheck boxes Allow for only one check box to be click at a timeStack Overflow