嵌套单选按钮选择 - javascript

问题描述 投票：0回答：2

我正在我的个人网站上工作，我正试图嵌套我的单选按钮，我知道我应该让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>
javascript html selection event-listener
2个回答
1
投票

这里有一个小东西使用 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.netbds87fjt。

与上述解决方案相同，使用纯 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.net0omtop0t。

而这里还有一个只用HTML和CSS的整洁的小解决方案。http:/jsfiddle.netNhXUV

不知道，你这种情况下能不能用。值得一试。

0
投票

我肯定会用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 "来验证是否选择了一个隐藏了嵌套的项目，是否应该向用户展示它。

例如 <input type="radio" onclick="myfunction()" />

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.