How can I make this div appear only when radio button is clicked?
Question
How can I only show the vertical line when its radio button is clicked? I tried some code, but doesn't seem to be working.
</<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>
Check this fiddle .
5 answers
solution1
1 ACCPTED 2015-08-04 00:11:47
For a CSS solution (what's your intended browser support), you can use the checked attribute.
.control {
display: none;
}
:checked + .control {
display: block;
}
http://jsfiddle.net/mwwgy0bs/12/
For a JS solution, we can apply a data-attribute to our inputs that set them as "selected". Then our CSS changes slightly to this:
.control {
display: none;
}
[data-selected=true] + .control {
display: block;
}
Our JS would look like:
$(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/
Since [data-selected=true] is an attribute selector, compatibility might be an issue. The solution could be re-written to use a class, like:
$(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');
});
});
solution2
0 2015-08-04 00:10:22
将您的if语句更改为：
if $('input[name=angle]:checked').val() == 'Horizontal'
solution3
0 2015-08-04 00:10:41
you can hide all the parent-items initially. And if you have the same markup you can come up with something like this.
$(document).ready(function () {
// Hide all the items
$('.item').addClass('hide');
$('input:radio[name=angle]').change(function () {
// Hide all the items
$('.item').addClass('hide');
// Get the next immediate parent
var $container = $(this).next('.item');
// Display the image
$container.removeClass('hide');
});
});
Also I would fix the mark up first, by adding quotes in all possible places. Then add a common class to the parent containers.
solution4
0 2015-08-04 00:14:31
Use .toggle() to hide and show the DIVs depending on which value is selected.
$(document).ready(function() { $('input:radio[name=angle]').change(function() { $(".parent-item").toggle(this.value == 'Horizontal'); $(".parent-item2").toggle(this.value == 'Vertical'); }); });
div.parent-item { width: 400px; height: 50px; margin: 25px; border-style: solid; border-width: 1px; } #knob { width: 50px; height: 50px; background-color: grey; margin-left: 25%; } div.parent-item2 { width: 50px; height: 400px; margin: 25px; border-style: solid; border-width: 1px; display: none; } #knob2 { width: 50px; height: 50px; background-color: grey; margin-right: 50%; margin-top: 165%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
solution5
0 2015-08-04 00:16:57
You have to do this for hiding the div
if (this.value == 'Horizontal')
{
$("#knob, .parent-item").show();
$("#knob2, .parent-item2").hide();
}
Check the fiddle http://jsfiddle.net/mwwgy0bs/19/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.