只選擇一個復選框來切換一組 div

Question

好的，我有一組 3 個 div，可以根據復選框選擇來切換顯示/隱藏，我的問題是我一次只希望選擇一個復選框

這是用於切換的復選框

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

這是切換 div 的代碼

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

感激地收到任何幫助

Answer 1

首先取消選中所有復選框然后選中此復選框

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

我已經為您創建了一個JSFiddle作為示例，它滿足您的要求。

腳本：

$('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>

如果您需要其他任何東西，請告訴我。

希望能幫助到你 ：）