选中无线电输入时显示和隐藏隐藏的<div> </div>

Question

我只是想多次使用这个功能而不必复制脚本，或者如果我需要再次使用它，我发现我自己添加了新的选择器。如果你不明白我想说的话，那就是我的fiddle。

$('.show-and-hide-content').click(function () {
  // Hide all
  $('.show-and-hide-true').hide('slideToggle');

  // Show checked
  if ($('#select-no').prop('checked')) {
    $('.show-and-hide-true').show('slideToggle');
  }
});

Answer 1

您对不同的操作使用相同的类和ID。看看这个修改过的fiddle

$('.show-and-hide-content').click(function () {
    // Hide all
    $('.show-and-hide-true').hide('slideToggle');

    // Show checked
    if ($('#select-no').prop('checked')) {
        $('.show-and-hide-true').show('slideToggle');
    }
});

$('.show-and-hide-content2').click(function () {
    // Hide all
    $('.show-and-hide-false').hide('slideToggle');

    // Show checked
    if ($('#select-yes2').prop('checked')) {
        $('.show-and-hide-false').show('slideToggle');
    }
});

Answer 2

<强> Working jsFiddle Demo

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();
        });

    });
});

Answer 3

你的意思是这样，你想在选中的值为'YES'时显示绿色文字。当选中“否”值时显示红色文字？

您也可以只使用此脚本使用“.show-and-hide-content”的多个div。

DEMO http://jsfiddle.net/yeyene/wfA6m/7/

然后，将无线电的id更改为类并使用此脚本。

JQUERY

$('.show-and-hide-content').click(function () {    
    if ($('input.select-no:checked').prop('checked')) {
        $(this).find('div.show-and-hide-false').show('slideToggle');
        $(this).find('div.show-and-hide-true').hide('slideToggle');
    }
    else{
        $(this).find('div.show-and-hide-true').show('slideToggle');
        $(this).find('div.show-and-hide-false').hide('slideToggle');
    }
});