如果选中收音机，则显示/隐藏帮助块

Question

如果选中单选，我需要一个显示相邻的 .help-block 的表单，但如果未选中相应的单选，则隐藏 .help-block。我的 javascript 一定是错误的，因为单击任何收音机都会显示所有 .help-block 跨度。

http://jsfiddle.net/utcwebdev/cwryu9ac/2/

    $(document).ready(function() {
      $('input[type="radio"]').next(".help-block").addClass('hidden');
      $('input[type="radio"]').change(function() {
        var $this = $(this);
        console.log($this);
        if ($this.is(":checked")) {
          $('input[type="radio"]').next(".help-block").removeClass('hidden');
        } else {
          $('input[type="radio"]').next(".help-block").addClass('hidden');
        }
      });
    });

<link href="//www.utc.edu/_resources/css/kickstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



<div class="control-group">

  <label class="control-label" for="Q3"><strong>3. Are you comfortable creating, saving, and attaching files on your computer? </strong>
  </label>
  <div class="controls">
    <label class="radio">
      <input type="radio" name="Q3" value="2">Yes. I am comfortable creating, saving, and attaching files on my computer.
      <span class="help-block">Very good. These are some of the technical skills you’ll need in an online course.</span>
    </label>
    <label class="radio">
      <input type="radio" name="Q3" value="0">No. I’m not comfortable creating, saving, and/or attaching files on my computer.
      <span class="help-block">You may need to seek assistance in acquiring these skills before taking an online class.	</span>
    </label>

  </div>
  <!--/controls-->
</div>
<!--/control-group-->

<div class="control-group">

  <label class="control-label" for="Q4"><strong>4.  Do you stay on track without direct supervision, or do you work best when someone is there to supervise you and help keep you focused? </strong>
  </label>
  <div class="controls">
    <label class="radio">
      <input type="radio" name="Q4" value="2">Yes. I am self-motivated.
      <span class="help-block">Being self-disciplined and organized are traits you’ll need to succeed in online learning.</span>
    </label>
    <label class="radio">
      <input type="radio" name="Q4" value="0">No. I need supervision
      <span class="help-block">In an online class, you’ll need to rely on yourself to keep track of assignments and due dates.</span>
    </label>
    <label class="radio">
      <input type="radio" name="Q4" value="1">Sometimes. At times I procrastinate.
      <span class="help-block">This could be a problem in an online course because it is your responsibility to keep track of assignments and due dates.  You’ll need to stay focused in order to succeed.</span>
    </label>

  </div>
  <!--/controls-->
</div>
<!--/control-group-->

Answer 1

为您单击的单选按钮触发 jQuery 更改事件。所以你需要相应地编码。

JS：

$(document).ready(function () {
    $('input[type="radio"]').next(".help-block").addClass('hidden');

    $('input[type="radio"]').change(function () {
        var $this = $(this);

        // Use this if you want to hide help-blocks of all questions
        //$('input[type="radio"]').next().addClass('hidden');

        // Use this if you want to hide other help-blocks of current question
        $('input[name="' + $(this).attr('name') + '"]').next().addClass('hidden');

        // Show help-block for selected button
        $this.next(".help-block").removeClass('hidden');
    });
});

JSFiddle：http://jsfiddle.net/cwryu9ac/5/

Answer 2

您需要使用this。相反，您在选择所有无线电输入的更改函数中查询input[type=radio]。

$(document).ready(function() {
      $('input[type="radio"]').next(".help-block").addClass('hidden');
      $('input[type="radio"]').change(function() {
        var $this = $(this);
        console.log($this);
        if ($this.is(":checked")) {
          $this.next(".help-block").removeClass('hidden');
        } else {
          $this.next(".help-block").addClass('hidden');
        }
      });
    });

我想补充一点，您不必使用 jQuery 来检查复选框是否被选中。您可以将$this.is(":checked") 替换为this.checked，这样更快更干净