只选择一个复选框来切换一组 div

Question

ok, I have a set of 3 divs which are toggled to show/hide based on a checkbox selection, my issue is I only want one checkbox at a time to be selected

This is the checkbox used to toggle

<input onClick="toggle('village');" type="checkbox" style="transform: scale(1.5);"><label> Only Villages</label>

This is the code that toggles the divs

function toggle(matchingAttribute) {
    // optain all div elements in the page
    var divArray = document.getElementsByTagName("div");
    for(i=divArray.length-1; i>=0; i--) {  // for each div
        if(divArray[i].id.match("_"+matchingAttribute+"_")) {
            if(divArray[i].style.display != 'none') {
                divArray[i].style.display = 'none';
            }
            else {
                divArray[i].style.display = '';
            }
         }
     }
 }

Any help gratefully received

Answer 1

at first unchecked all checkbox then checked this checkbox

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == "checkbox") {
        inputs[i].checked = false; 
    }  
}
this.checked = true;

Answer 2

I've created a JSFiddle for you as an example, which fulfills what your requirement is.

Script:

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("value");

    if (this.checked)
    {
        $('input:checkbox').removeAttr('checked');

        $(".red").hide();
        $(".green").hide();
        $(".blue").hide();    

        $("." + inputValue).show();

        $(this).prop("checked", true);
    }
    else
    {
        $(".red").hide();
        $(".green").hide();
        $(".blue").hide();    
    }

});

HTML:

<div>
    <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
    <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
    <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
</div>

<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

Do let me know if you need anything else.

Hope it helps :)