嵌套單選按鈕選擇-javascript

我正在我的個人網站上工作，我試圖嵌套我的單選按鈕。我知道我應該有JavaScript運行做我需要它做的事情，但我不能得到明確的答案。我想要做的是如下。嵌套單選按鈕選擇-javascript

選項編號2和6都有子選項可供選擇。但我希望如果我選擇1或3-5或7，則用戶不能選擇任何潛艇。並且如果用戶錯誤地選擇一個子並且試圖選擇上述數字中的一個，那麼它將清除該子選擇。請幫忙。或者至少有人能指出我正確的方向嗎？非常感謝。

<div class="one"> 
 
<div class="two"> 
 
    <div class="three"> 
 
    <div class="four"> 
 
     <label class="five six">Section</label> 
 
     <div class="seven"> 
 
     <label class="ten"> 
 
      <input value="option_1" name="radios" type="radio" /> 
 
      option 1</label> 
 
     </div> 
 
     <div class="seven"> 
 
     <label class="ten"> 
 
      <input value="option_2" name="radios" type="radio" /> 
 
      option 2</label> 
 
     <br> 
 
     <div class="one"> 
 
      <div class="one"> 
 
      <div class="two"> 
 
       <div class="three"> 
 
       <div class="four"> 
 
        <div class="eight"> 
 
        <label class="nine"> 
 
         <input type="radio" name="inline radio" value="sub_1"> 
 
         Sub 1</label> 
 
        <label class="nine"> 
 
         <input type="radio" name="inline radio" value="sub_2"> 
 
         Sub 2</label> 
 
        <label class="nine"> 
 
         <input type="radio" name="inline radio" value="sub_3"> 
 
         Sub 3</label> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="seven"> 
 
      <label class="ten"> 
 
      <input value="option_3" name="radios" type="radio" /> 
 
      option 3</label> 
 
     </div> 
 
     <div class="seven"> 
 
      <label class="ten"> 
 
      <input value="option_4" name="radios" type="radio" /> 
 
      option 4</label> 
 
     </div> 
 
     <div class="seven"> 
 
      <label class="ten"> 
 
      <input value="option_5" name="radios" type="radio" /> 
 
      option 5</label> 
 
     </div> 
 
     <div class="seven"> 
 
      <label class="ten"> 
 
      <input value="option_6" name="radios" type="radio" /> 
 
      option 6</label> 
 
      <div class="one"> 
 
      <div class="two"> 
 
       <div class="three"> 
 
       <div class="four"> 
 
        <div class="eight"> 
 
        <label class="nine"> 
 
         <input type="radio" name="inline radio" value="sub_1"> 
 
         Sub 1</label> 
 
        <label class="nine"> 
 
         <input type="radio" name="inline radio" value="sub_2"> 
 
         Sub 2</label> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="seven"> 
 
      <label class="ten"> 
 
      <input value="option_7" name="radios" type="radio" /> 
 
      option 7</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-11 the_new_guy

您應該使用javascript。 – TomSlick

下面是使用jQuery的一個小東西，如果我理解正確你的要求可能的工作。爲了演示腳本，HTML是你的一個虛擬版本。

<!doctype html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
    $(function(){ 
     $("input[type=radio]").on("change",function(){ 
      if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub")) 
       $(".sub").removeAttr("disabled"); 
      else 
       $(".sub").attr("checked",false).attr("disabled","disabled"); 

     }); 
    }); 
</script> 
</head> 
<body> 
    <form> 
     <input type=radio name="lvl1" class="one" value=""> Option 1<br> 
     <input type=radio name="lvl1" class="two" value=""> Option 2<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br> 
     <input type=radio name="lvl1" class="three" value=""> Option 3<br> 
     <input type=radio name="lvl1" class="four" value=""> Option 4<br> 
     <input type=radio name="lvl1" class="five" value=""> Option 5<br> 
     <input type=radio name="lvl1" class="six" value=""> Option 6<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br> 
     <input type=radio name="lvl1" class="seven" value=""> Option 7<br> 
    </form>  
</body> 
</html>

這裏的小提琴在網上查詢：https://jsfiddle.net/bds87fjt/

同樣的解決方案與上述使用純的Javascript： -

<!doctype html> 
<html> 
<head> 
<script> 

    function disableSub(){ 
     sub = document.querySelectorAll(".sub"); 
     for(i=0; i<sub.length; i++){ 
     sub[i].checked=false; 
     sub[i].disabled=true; 
     } 
    } 
    function enableSub(){ 
     sub = document.querySelectorAll(".sub"); 
     for(i=0; i<sub.length; i++){ 
     sub[i].disabled=false; 
     } 
    } 

</script> 
</head> 
<body> 
    <form> 
     <input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br> 
     <input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br> 
     <input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br> 
     <input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br> 
     <input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br> 
     <input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br> 
     &nbsp;&nbsp;&nbsp;<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br> 
     <input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br> 
    </form>  
</body> 
</html>

下面是上面的小提琴：https://jsfiddle.net/0omtop0t/

而且這裏有另一個整潔的小解決方案，只使用HTML和CSS：http://jsfiddle.net/NhXUV/

不知道，它會在你的情況下工作。值得檢查。

來源

2015-09-11 18:36:51 CoderGuy

是的，這正是我正在尋找的。唯一的問題是，因爲我是新手，所以我試圖遠離jquery。我明白他們就像堂兄弟一樣。但即時通訊還沒有準備好開始處理，但只是JavaScript。但非常感謝你的回答！ –

不客氣:) 如果你正在尋找一個免費的javascript解決方案，你可以看看我列出的第二個小提琴。它僅使用HTML和CSS。順便說一句，如果你喜歡我的答案，它的工作原理，你會介意選擇它作爲正確的答案和/或提高投票，謝謝？：P – CoderGuy

哈哈沒有即時通訊只尋找JS而不是JQuery。 :) –

我一定會用這個JavaScript去。

基本上，您可以編寫一個函數，只要該類的div單選按鈕被調用，就可以調用它gotNestedStuff，更改了他的選擇。該切換將顯示/隱藏div與類別nestedStuff，其中包含只有主選項是可選的子選項。

這裏的基本功能（使用jQuery）：

<script type="text/javascript"> 
    //let's hide the nested stuff on page load 
    $(document).ready(function() { 
     $('.nestedStuff').hide(); 
    }); 

    //on click on an element that has class "gotNestedStuff", show it's hidden content 
    $('.gotNestedStuff .option').on('change', function(e) { 
     console.log($(e.relatedTarget)); 
     $(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle(); 
    }); 
</script>

這個HTML例如工作：

<div> 
     <div class="optionContainer"> 
      <input class="option" type="radio" name="option" value="1">Option 1 
     </div> 
     <div class="optionContainer gotNestedStuff"> 
      <input class="option" type="radio" name="option" value="2">Option 2<br> 
      <div class="optionContainer nestedStuff"> 
       <input class="option" type="radio" name="option" value="2.1">Option 2.1<br> 
       <input class="option" type="radio" name="option" value="2.2">Option 2.2<br> 
      </div> 
     </div> 
     <div class="optionContainer"> 
      <input class="option" type="radio" name="option" value="3">Option 3<br> 
     <div> 
    </div>

你也可以調用一個函數「的onclick」從你的元素，將驗證如果一個隱藏嵌套東西的項目被選中，它應該顯示給用戶。

Ex。 <input type="radio" onclick="myfunction()" />

來源

2015-09-11 18:39:08 ablais

嵌套單選按鈕選擇-javascript

回答

相關問題