如果检查无线电,则显示/隐藏帮助块

时间:2015-08-13 19:13:25

标签: jquery forms twitter-bootstrap

如果选中了收音机,我需要一个显示相邻.help-block的表单,但如果取消选中相应的收音机,则会隐藏.help-block。我必须让我的javascript错误,因为点击任何电台都会显示所有.help-block spans。

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-->

2 个答案:

答案 0 :(得分:1)

您需要使用public void Run() { for (int i = 0; i < 10; i++) { Thread t = new Thread(myFun); t.Start(i + 1); } } private void myFun(object threadNo) { Console.WriteLine("Thread #" + threadNo.ToString()); } 。相反,您在更改功能中查询this,选择所有无线电输入。

input[type=radio]

我想补充一点,您不必使用jQuery来检查复选框是否已选中。您可以将$(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'); } }); }); 替换为更快更干净的$this.is(":checked")

答案 1 :(得分: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/