Как сделать так, чтобы флажок отображал / скрывал текст с помощью события onChange

Question

Я работаю над флажком, который показывает новое текстовое поле при нажатии. Это просто два текстовых поля, где одно из них скрыто. Когда флажок установлен, он показывает скрытое текстовое поле и скрывает уже включенное текстовое поле.

Я использую событие onChange, чтобы показать / скрыть, но я могу включить его только один раз. И так как я только начинаю использовать Javascript, я действительно не разработал все переменные о том, как сделать два события onChange для одного и того же флажка (*. Я использую onChange, поскольку он реагирует на сам флажок, в то время как onClick как-то реагировать только на все, кроме флажка.

Еще одна проблема заключается в том, что я использую Wix Corvid для его программирования, и у меня нет никакого функционального имени или идентификатора на флажке.

$w.onReady(function (){ 
$w('#checkboxGroup1').onChange((event)=> {
$w('#text108').show();
$w('#text106').hide();  
})
});

Answer 1

https://jsfiddle.net/x0gon2a9/4/

<input type="checkbox" class="checkbox" id="checkbox" value="chckbox1" checked="true"> checkbox1 <input type="text" id="input-1" value="input-1"> <input type="text" id="input-2" value="input-2" >

 if ($("#checkbox").is(":checked")) {
 $("#input-1").hide();
}else {
$("#input-1").show();
}
});

$("#checkbox").click(function(){
if ($("#checkbox").is(":checked")) { 
$("#input-1").hide();
$("#input-2").show();
}else {
$("#input-1").show();
$("#input-2").hide();
}
})

Answer 2

Вы должны проверить, если это проверено или нет сначала:

$w.onReady(function (){ 
$w('#checkboxGroup1').change((event)=> {
if($w('#checkboxGroup1').prop('checked') == true)
   $w('#text108').show();
else
   $w('#text106').hide();  
})
});

Answer 3

Использование event.target.checked

$w.onReady(function (){ 
  $w('#checkboxGroup1').onChange((event)=> {
    if (event.target.checked) {
       $w('#text108').show();
    } else {
      $w('#text106').hide();  
    }
  });
});

Answer 4

Вы можете использовать селектор классов, чтобы добавить EventListener к флажкам и показать скрыть ввод, основываясь на этом.

Вот пример рабочего кода в ванили javascript.

const checkboxes = document.querySelectorAll('.checkbox');
checkboxes.forEach(checkbox => {

    checkbox.addEventListener('change', function() {

        const id = this.dataset.inputId;

        if (this.checked === true) {
            document.getElementById(id).style.display = 'block';
        } else {
            document.getElementById(id).style.display = 'none';
        }
    });
});

 <input type="checkbox" class="checkbox" data-input-id="input-1" value="chckbox1"> checkbox1
    <input type="text" id="input-1" value="input-1" style="display: none">
    <input type="checkbox" class="checkbox" data-input-id="input-2" value="chckbox1"> checkbox2
    <input type="text" id="input-2" value="input-2" style="display: none">