jquery - 显示和隐藏隐藏检查无线电输入时

Question

我只想多次使用此功能，而不必复制脚本，或者如果我需要再次使用它，我会自己添加新的选择器。如果你不明白我想说什么，这是我的小提琴。

$('.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。看看这个修改过的小提琴

$('.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

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

    });
});

Answer 3

你的意思是这样，当检查值为“是”时，你想显示绿色文本。并在检查“否”值时显示红色文本？

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

演示http://jsfiddle.net/yyene/wfA6m/7/

然后，将收音机的 id 更改为 classes 并使用此脚本。

查询

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