javascript - 如何使用 onChange 事件使复选框显示/隐藏文本

Question

我正在研究一个复选框，单击时会显示一个新的文本框。它只是两个文本框，其中一个被隐藏。选中该复选框后，它会显示隐藏的文本框并隐藏已启用的文本框。

我正在使用 onChange 事件来显示/隐藏，但我只能设法将其打开一次。由于我刚刚开始使用 Javascript，所以我还没有真正弄清楚如何为同一个复选框创建两个 onChange 事件的所有变量(*。我使用 onChange 因为它对复选框本身使用react，而 onClick 仅以某种方式对除复选框之外的所有内容使用react。

另一个问题是，我使用 Wix Corvid 对其进行编程，但在复选框上没有获得任何功能名称或 ID。

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