巢单选按钮选择- javascript
nest radio button selection - javascript
我正在我的个人网站上工作，我正在尝试嵌套我的单选按钮。我知道我应该有javascript运行做我需要它做什么，但我不能得到一个明确的答案。我想做的是这样的。
选项2和6都有子选项。但我想要的是，如果我选择1或3-5或7，那么用户就不能选择任何子条目。如果用户错误地选择了一个sub，并试图选择前面提到的数字之一，那么它将清除sub选择。请帮助。或者至少有人能给我指出正确的方向?非常感谢。
<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>这里有一些使用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>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<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>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<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>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<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>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<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/
不确定，但它会在你的情况下工作。值得一看
我肯定会用JavaScript。
基本上，您可以编写一个函数，当类的div(我们称其为gotNestedStuff)的单选按钮更改其选择时，该函数将被调用。该开关将显示/隐藏div与nestedStuff类，其中包含子选项，只能在主选项为
<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()" />
相关文章：
- 如何使用javascript选择字符串的部分，添加html标记或删除部分
- JavaScript选择器:查找包含具有特定属性的子体的节点
- 如何利用多链接延迟检查并显示ping结果，然后使用JavaScript选择最快的URL
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 使用Ajax或JavaScript选择下拉列表选项后，在同一页面上执行PHP脚本
- 当使用jQuery/Javascript选择一个多选时，如何使所有值都不被选中:
- Javascript选择元素到字符串的比较
- Javascript选择周围的所有元素
- Javascript 选择本机 N:N 关系实体 crm 2011
- 更新 url 而不重新加载，具体取决于使用 jquery/javascript 选择的复选框
- Javascript 选择，从名称中获取值
- 使用ajax/javascript选择项目并将其添加回mysql
- 网站范围内jQuery/javascript选择器的最佳实践
- 用于检查未使用的CSS/JavaScript选择器的NetBeans插件
- javascript选择td´s并计数重复项
- Javascript选择更改提交表单
- 如何使用javascript选择javascript对象中的第一项
- 在请求成功时使用javascript选择一个选项
- 使用Regex Javascript选择第一个目录
- JavaScript选择功能
