工作 jsFiddle 演示
HTML
<div class="show-and-hide-content">
<input type="radio" data-type="true" />Yes
<input type="radio" data-type="false" />No
<div class="content content-false">You select NO</div>
<div class="content content-true">You select YES</div>
</div>
<div class="show-and-hide-content">
<input type="radio" data-type="true" />Yes
<input type="radio" data-type="false" />No
<div class="content content-false">You select NO</div>
<div class="content content-true">You select YES</div>
</div>
<!-- other duplicates - same markup -->
CSS
.show-and-hide-content .content { display: none; }
.show-and-hide-content .content-false { color: red; }
.show-and-hide-content .content-true { color: green; }
jQuery
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $radios = $row.find('input');
$radios.attr('name', 'group-' + i);
$radios.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
