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

How to toggle div visibility using radio buttons?

提问by Peter

I'm working on a project in which I have to toggle the visibility of a <div>.

我正在做一个项目，我必须在其中切换<div>.

I've got the following code:

我有以下代码：

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

I would like to togle the business-fields div. So, if none of the radio buttons, or the 'personal' radio button is selected: The div should be hidden. If the 'business' radio button is selected, I want it to show.

我想切换业务领域 div。因此，如果没有选择任何单选按钮或“个人”单选按钮：应该隐藏 div。如果选择了“业务”单选按钮，我希望它显示出来。

Currently, I am using this code:

目前，我正在使用此代码：

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

However, I was wondering if I can do this using the .toggle() function.

但是，我想知道是否可以使用 .toggle() 函数来做到这一点。

回答by Akxe

I usually tend not to use JS if possible, therefore here comes a HTML+CSS way approach.

如果可能的话，我通常倾向于不使用 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>

The ~stands for any siblings, that are after the element we defined before the ~sign.

The~代表任何兄弟姐妹，在我们在~符号之前定义的元素之后。

回答by David says reinstate Monica

I'd suggest using the changeevent, and supplying a Boolean switch to the toggle()method, which will show the jQuery collection of elements if the switch evaluates to true, and hide them if it evaluates to false:

我建议使用该change事件，并为该toggle()方法提供一个布尔开关，如果开关计算为true，它将显示元素的 jQuery 集合，如果计算为，则隐藏它们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>

Incidentally, note I've also wrapped the associated text, to indicate the radio-button's purpose, inside of a <label>element to directly associate that text with the <input>, so clicking the text checks the <input>automatically.

顺便说一句，请注意，我还包装了关联文本，以指示单选按钮的用途，在<label>元素内部直接将该文本与 关联<input>，因此单击文本会<input>自动检查。

References:

参考：

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

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

回答by SimarjeetSingh Panghlia

JS Fiddle

JS小提琴

Try this one

试试这个

<input type="radio" name="type" value="1" checked ="true"> 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>

.business-fields{
    display: none;
}



    $("input[name='type']").change(function() {
        $(".business-fields").toggle();
});

回答by Ollie_W

.show and .hide are pretty slow. https://twitter.com/paul_irish/status/564443848613847040

.show 和 .hide 很慢。 https://twitter.com/paul_irish/status/564443848613847040

It's better to toggle a css class on and off with javascript. Set the css of the class to {visibility: hidden} or {display: none}

最好使用 javascript 打开和关闭 css 类。将类的 css 设置为 {visibility: hidden} 或 {display: none}

回答by Bhojendra Rauniyar

You may use like this:

你可以这样使用：

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

回答by TECHNOMAN

use the below code

使用下面的代码

<script>
$(function(){
$(":radio[value=1]").click(function(){
    var isVisible = $( ".business-fields" ).is( ":visible" );
    if(isVisible==true)
        $('.business-fields').toggle();
});

$(":radio[value=2]").click(function(){
    var isVisible = $( ".business-fields" ).is( ":visible" );
    if(isVisible==false)
        $('.business-fields').toggle();
});
});
</script>

AND HTML is-

并且 HTML 是-

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

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

回答by linuxdan

Possibly a more elegant solution, It's a bit more readable in my opinion, and and as @Ollie_W points out it might be more performant that toggle (show/hide).

可能是一个更优雅的解决方案，在我看来它更具可读性，并且正如@Ollie_W 指出的那样，切换（显示/隐藏）可能会更高效。

$('input[name="type"]').on('change', function(event) {
  var radioButton = $(event.currentTarget),
      isBusiness = radioButton.val() === 'business' && radioButton.prop('checked');
  $('.business-fields').toggleClass('hidden', !isBusiness);
}).change();

.hidden {
  display: none;
}

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

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