如何使用单选按钮切换div可见性？

Question

我正在开展一个项目,我必须切换一个项目的可见性<div>.

我有以下代码:

<input type="radio" name="type" value="1"> Personal
<input type="radio" name="type" value="2"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

我想谈谈业务领域div.因此,如果没有选择单选按钮或"个人"单选按钮:应隐藏div.如果选择了"商家"单选按钮,我希望它显示.

目前,我正在使用此代码:

$("input[name='type']").click(function() {
    var status = $(this).val();
    if (status == 2) {
        $(".business-fields").show();
    } else {
        $(".business-fields").hide();
    }
});

但是,我想知道我是否可以使用.toggle()函数执行此操作.

Answer 1

我建议使用该change事件,并为该toggle()方法提供一个布尔值开关,如果开关计算结果将显示jQuery元素集合,true如果它的计算结果为false:

// select the relevant <input> elements, and using on() to bind a change event-handler:
$('input[name="type"]').on('change', function() {
  // this, in the anonymous function, refers to the changed-<input>:
  // select the element(s) you want to show/hide:
  $('.business-fields')
      // pass a Boolean to the method, if the numeric-value of the changed-<input>
      // is exactly equal to 2 and that <input> is checked, the .business-fields
      // will be shown:
      .toggle(+this.value === 2 && this.checked);
// trigger the change event, to show/hide the .business-fields element(s) on
// page-load:
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" name="type" value="1">Personal</label>
<label>
  <input type="radio" name="type" value="2">Business</label>

<div class="business-fields">
  <input type="text" name="company-name">
  <input type="text" name="vat-number">
</div>

顺便提一下,请注意我还将相关文本包装起来,以指示单元格中的单选按钮的用途,<label>以直接将该文本与该文本相关联<input>,因此单击文本会<input>自动检查.

参考文献:

• change().
• on().
• toggle().

Answer 2

如果可能的话,我通常倾向于不使用JS,因此这里提供了一种HTML + CSS方式.

.bussines-type .business-fields {
	display: none;
}

.bussines-type input[value="2"]:checked ~ .business-fields {
	display: block;
}

<div class="bussines-type">
	<input id="bt1" type="radio" name="type" value="1">
        <label for="bt1"> Personal</label>
	<input id="bt2" type="radio" name="type" value="2">
        <label for="bt2"> Business</label>

	<div class="business-fields">
		<input type="text" placeholder="Company name" name="company-name">
		<input type="text" placeholder="Vat number" name="vat-number">
	</div>
</div>

~任何兄弟姐妹的立场,在我们在~标志之前定义的元素之后.