切換兩個複選框

我有兩個複選框，分別處理垂直和水平狀態。如果兩者都關閉，那麼可以，但如果其中一個必須關閉，最重要的是兩者都不能打開。切換兩個複選框

我不想在這裏的jQuery。

如果我兩者都氾濫，我打了一個水平，然後垂直，就會切換，作爲水平得不到遏制和垂直將成爲檢查。

但如果我這樣做，首先是垂直的另一種方式，我無法檢查的水平。

的完整代碼在github和演示上gh-pages運行。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Toggle</title> 
 
</head> 
 
<style> 
 
    .constraint { 
 
    color: #007bff; 
 
    padding: 0rem .5rem; 
 
    } 
 
    
 
    span.horz:before { 
 
    content: "\2194"; 
 
    } 
 
    
 
    span.vert:before { 
 
    content: "\2195"; 
 
    } 
 
</style> 
 

 
<body> 
 
    <span class="constraint">Constraint: </span> 
 
    <span class="constraint vert"> 
 
     <input type="checkbox" id="vertical" onchange="constraints()"> 
 
     <span class="constraint horz"></span> 
 
    <input type="checkbox" id="horizontal" onchange="constraints()"> 
 
</body> 
 
<script type="text/javascript"> 
 
    function constraints() { 
 
    inputVert = document.getElementById("vertical"); 
 
    inputHorz = document.getElementById("horizontal"); 
 
    console.log("initially: vert:" + inputVert.checked); 
 
    console.log("initially: horz:" + inputHorz.checked); 
 
    if (inputVert.checked) { 
 
     console.log("vert clicked -> vert:" + inputVert.checked); 
 
     console.log("vert clicked -> horz:" + inputHorz.checked); 
 
     // inputHorz = document.getElementById("horizontal"); 
 
     inputHorz.checked = false; 
 
     // inputVert.checked = true; 
 
    }; 
 
    if (inputHorz.checked) { 
 
     console.log("horz clicked -> vert:" + inputVert.checked); 
 
     console.log("horz clicked -> horz:" + inputHorz.checked); 
 
     // inputVert = document.getElementById("vertical"); 
 
     inputVert.checked = false; 
 
     // inputHorz.checked = true; 
 
    }; 
 
    } 
 
</script> 
 

 
</html>

任何幫助不勝感激，

由於

來源

2017-09-14 Shane G

使用jQuery，你可以像這樣做，希望這可以幫助您

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Toggle</title> 
 
</head> 
 
<style> 
 
    .constraint { 
 
    color: #007bff; 
 
    padding: 0rem .5rem; 
 
    } 
 

 
    span.horz:before { 
 
    content: "\2194"; 
 
    } 
 

 
    span.vert:before { 
 
    content: "\2195"; 
 
    } 
 
</style> 
 

 
<body> 
 
    <span class="constraint">Constraint: </span> 
 
    <span class="constraint vert"> 
 
    <input type="checkbox" id="vertical"> 
 
    <span class="constraint horz"></span> 
 
    <input type="checkbox" id="horizontal"> 
 
</body> 
 
<script type="text/javascript"> 
 
    
 
    $('#vertical').change(function() { 
 
     if($(this).is(":checked")){ 
 
      $('#horizontal').attr('checked', false); 
 
     }  
 
    }); 
 
    
 
    $('#horizontal').change(function() { 
 
     if($(this).is(":checked")){ 
 
      $('#vertical').attr('checked', false); 
 
     }  
 
    }); 
 
    
 
    
 
</script> 
 

 
</html>

來源

2017-09-14 14:33:35

我將不得不使用jQuery，非常感謝。 –

JS應該在一個立即調用的函數中嗎？或者，IIF的使用是否會導致你寫的JS不能運行？ –

我在頭部添加了jQuery cdn鏈接。 –

這是使用一個輸入射頻經典場景。這迫使用戶選擇最多一個選擇。 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

來源

2017-09-14 14:25:15

我希望複選框更改爲一個好看的撥動喜歡這裏的http：// WWW .bootstraptoggle.com /但是，如果我必須使用單選按鈕，我認爲我無法做到這一點。謝謝 –

請在您的鏈接中添加一些上下文。答案不能只依賴外部內容，可能會脫機，使其他用戶無用... –

切換兩個複選框

回答

相關問題