英文:
How to make a checkbox show/hide text with onChange event
问题
我正在处理一个复选框，当点击它时会显示一个新的文本框。这只是两个文本框，其中一个是隐藏的。当复选框被选中时，它会显示隐藏的文本框并隐藏已经启用的文本框。
我在使用onChange事件来显示/隐藏，但我只能成功地让它工作一次。由于我刚刚开始使用Javascript，我还没有完全弄清楚如何为同一个复选框制作两个onChange事件。我之所以使用onChange，是因为它对复选框本身有反应，而onClick似乎只对复选框之外的一切有反应。
另一个问题是，我正在使用Wix Corvid来编程，但在复选框上没有得到任何可用的名称或ID。
$w.onReady(function (){
$w('#checkboxGroup1').onChange((event)=> {
$w('#text108').show();
$w('#text106').hide();
})
});
英文:
I am working on a checkbox that shows a new textbox when clicked. It's just two textboxes where one of them is hidden. When the checkbox is checked it shows the hidden textbox and hides the already enabled textbox.
I am using the onChange event to show/hide, but I can only manage to turn it on once. And since I'm just starting out using Javascript, I haven't really worked out all the variables on how make two onChange events for the same checkbox (*. I am using onChange as it reacts to the checkbox itself, while onClick somehow only react to everything except the checkbox.
Another problem is that I'm using Wix Corvid to program it, and I don't get any functioning name or ID on the checkbox.
$w.onReady(function (){
$w('#checkboxGroup1').onChange((event)=> {
$w('#text108').show();
$w('#text106').hide();
})
});
答案1
得分: 2
Here is the translated content:
<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" >`
$( document ).ready(function() {
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();
}
})
英文:
<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();
}
})
</details>
# 答案2
**得分**: 1
你需要首先检查是否已选中：
```javascript
$w.onReady(function (){
$w('#checkboxGroup1').change((event)=> {
if($w('#checkboxGroup1').prop('checked') == true)
$w('#text108').show();
else
$w('#text106').hide();
})
});
英文:
You need to check if it's checked or not first:
$w.onReady(function (){
$w('#checkboxGroup1').change((event)=> {
if($w('#checkboxGroup1').prop('checked') == true)
$w('#text108').show();
else
$w('#text106').hide();
})
});
答案3
得分: 0
你可以使用类选择器来在复选框上添加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';
}
});
});
同时，这是相关的HTML代码：
<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">
以上是翻译好的代码部分。
英文:
You can use class selector to add EventListener on the checkboxs and show hide the input based on that.
Here is the sample working code in vanilla javascript.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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';
}
});
});
<!-- language: lang-html -->
<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">
<!-- end snippet -->
答案4
得分: 0
"Use event.target.checked"
$w.onReady(function () {
$w('#checkboxGroup1').onChange((event) => {
if (event.target.checked) {
$w('#text108').show();
} else {
$w('#text106').hide();
}
});
});
英文:
Use event.target.checked
$w.onReady(function (){
$w('#checkboxGroup1').onChange((event)=> {
if (event.target.checked) {
$w('#text108').show();
} else {
$w('#text106').hide();
}
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论