Question

我需要根据对特定问题的回答来展示和隐藏一些问题。我没有编写大量重复代码，而是尝试编写通用函数。

适用于选择选项，但不适用于单选按钮。我添加了一个注释的console.log语句，其中出现问题。我不知道如何选择用户点击的单选按钮，而不是所有单选按钮。在自定义代码中，我使用$（this）并且该工作正在使用，但不确定如何进行概括。

在这个例子中，如果＃q1是＆＃39;是＆＃39;然后＆＃39; q2＆＃39;和＆＃39; q3＆＃39;应该显示，否则被隐藏。如果#a设置为＆＃39; 1＆＃39;然后#b和#c应显示，否则隐藏。

HTML：

<div id="q1">
  Question 1
  <select>
    <option>Select</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
</div>
<div id="q2">
  Question 2
  <input type="text" />
</div>
<div id="q3">
  Question 3
  <input type="radio" name="q3" value="0">0
  <input type="radio" name="q3" value="1">1
  <input type="radio" name="q3" value="2">2
</div>



<div id="a">
  <input type="radio" name="q3" value="0">0
  <input type="radio" name="q3" value="1" checked>1
  <input type="radio" name="q3" value="2">2
</div>
<div class="b">b</div>
<div class="c">c</div>

JS：

function set_related(element, value, related) {

  var element = element,
    value = value,
    related = related;

  function display() {
    console.log($(element).val());  // always returns 0 because not $(this) element but all 
    if ($(element).val() == value ? $(related).show() : $(related).hide());
  }

  $(document).ready(function() {
    display();
    $(element).change(display);
  })

}

$(document).ready(function() {
  set_related($("#q1 select"), "yes", $("#q2, #q3"));
  set_related($("#a input[type='radio']"), "1", $(".b, .c"));
})

Answer 1

编辑：

您的单选按钮功能调用应为

 $("#a input[type='radio']").click(function() {
  set_related($(this), "1", $(".b, .c"));
  });

DEMO

Answer 2

您可以使用type属性选择单选按钮，以及所选元素的checked伪类，例如;

$('#q3 input[type="radio"]:checked');

在函数中你需要类似的东西;

$('#q1 input[type="radio"]').on('change', function(){
    if ($(this).val() == 'yes' )
    {
        $('#q2').show();
        $('#q3').show();
    }
    else
    {
        $('#q2').hide();
        $('#q3').hide();
    }
});

如何在通用功能中选择单个单选按钮？

2 个答案: