单击单选按钮时，如何仅显示垂直线？我尝试了一些代码，但似乎没有用。
</<script type="text/javascript">
$(document).ready(function() {
$('input:radio[name=angle]').change(function() {
if (this.value == 'Horizontal')
else if (this.value == 'Vertical')
}
});
});
</script>
</head>
<body>
<h1>Grade me in chrome</h1>
<input type="radio" name="angle" id=shapeh checked="checked" value="Horizontal">Horizontal
<div class="parent-item">
<div id="knob"></div>
</div>
<input type="radio" name="angle" id=shapev value="Vertical">Vertical
</form>
<div class="parent-item2">
<div id="knob2"></div>
</div>
选中此fiddle。
最佳答案
对于CSS解决方案（预期的浏览器支持），可以使用checked属性。
.control {
display: none;
}
:checked + .control {
display: block;
}
http://jsfiddle.net/mwwgy0bs/12/
对于JS解决方案，我们可以对
data-attribute应用inputs并将其设置为“选定”。然后我们的CSS对此略有更改：.control {
display: none;
}
[data-selected=true] + .control {
display: block;
}
我们的JS看起来像：
$(document).ready(function() {
var $selected = $('input:radio[name=angle]').eq(0);
$selected.attr('data-selected', true);
// Set event binding
$('input:radio[name=angle]').change(function() {
$selected.attr('data-selected', false);
$selected = $(this).attr('data-selected', true);
});
});
http://jsfiddle.net/mwwgy0bs/20/
由于
[data-selected=true]是属性选择器，因此兼容性可能会成为问题。解决方案可以重写为使用类，例如：$(document).ready(function() {
var $selected = $('input:radio[name=angle]').eq(0);
$selected.toggleClass('selected');
// Set event binding
$('input:radio[name=angle]').change(function() {
$selected.toggleClass('selected');
$selected = $(this).toggleClass('selected');
});
});
http://jsfiddle.net/mwwgy0bs/21/