Как переключить видимость div с помощью переключателей?

Я работаю над проектом, в котором мне нужно переключить видимость <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().

Ответ 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>

Ответ 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>

Ответ 3

JS Fiddle

Попробуйте этот

<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();
});

Ответ 4

.show и .hide довольно медленные. https://twitter.com/paul_irish/status/564443848613847040

Лучше включить и выключить класс css с помощью javascript. Установите для класса css значение {visibility: hidden} или {display: none}

Ответ 5

Вы можете использовать следующее:

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

Ответ 6

используйте приведенный ниже код

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

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

Ответ 7

Возможно, более элегантное решение, это немного более читаемо, на мой взгляд, и, как указывает @Ollie_W, это может быть более эффективным, чем toggle (show/hide).

$('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>