嵌套单选按钮选择-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

回答

相关问题