Javascript 男性或女性复选框选择器

将只选择一个。当我第一次选择女性时，它可以正常工作。 事实上，我想实现，如果我选择男性，那么女性将自动取消选中，如果我选中女性，男性将自动取消选中

函数myFunction（）{
var checkBox=document.getElementById（“myCheck1”）；
var checkBox2=document.getElementById（“myCheck2”）；
var text=document.getElementById（“text”）；
var text2=document.getElementById（“text2”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
text2.style.display=“无”；
checkBox2.checked=false；
}else if（checkBox2.checked==true）{
text2.style.display=“块”；
text.style.display=“无”；
checkBox.checked=false；
}
否则{
text.style.display=“无”；
text2.style.display=“无”；
}
}

选中复选框时显示一些文本：

复选框： 已选中复选框！男性

已选中复选框！女性

---

您需要知道哪个复选框调用函数，并且您可以移交元素以检查实际元素

函数myFunction（元素）{
var checkBox=document.getElementById（“myCheck1”）；
var checkBox2=document.getElementById（“myCheck2”）；
var text=document.getElementById（“text”）；
var text2=document.getElementById（“text2”）；
if（元素===复选框&&checkBox.checked）{
text.style.display=“块”；
text2.style.display=“无”；
checkBox2.checked=false；
返回；
}
if（元素===checkBox2&&checkBox2.checked）{
text2.style.display=“块”；
text.style.display=“无”；
checkBox.checked=false；
返回；
}
text.style.display=“无”；
text2.style.display=“无”；
}

选中复选框时显示一些文本：

复选框： 已选中复选框！男性

---

已选中复选框！对于女性

不确定如果只选择了一个选项，为什么要使用复选框，我可以建议改用无线电输入吗

HTML

男性
女性
所选男性
所选女性

Javascript

const form = document.getElementById('example-form');
const inputs = form.getElementsByTagName('input');
const texts = document.getElementsByClassName('text');

for(let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function(evt) {
    toggleText(evt.target.value);
  })
}

function toggleText(tar) {
  for(let t = 0; t < texts.length; t++) {
    document.getElementsByClassName('text')[t].classList.add('hidden');
  }
  document.getElementById(`text--${tar}`).classList.remove('hidden')
}

const form=document.getElementById（'example-form'）；
常量输入=form.getElementsByTagName（“输入”）；
const text=document.getElementsByClassName（'text'）；
for（设i=0；i

只是想展示另一种简单的方法。由于与

text

关联的

myCheck1

和与

text2

关联的

myCheck2

，我决定将

text

的id重命名为

text1

。通过这种方式，我可以使用

element.id.replace（'myCheck'，'text'）

等更轻松地控制关联的元素，而不是执行大量的if/elseif/else调用

看一看，简单得多：

函数myFunction（元素）{
document.getElementById（“text1”）.style.display=“无”；
document.getElementById（“text2”）.style.display=“无”；
如果（element.checked！=true）{
返回true；
}
document.getElementById（“myCheck1”）.checked=false；
document.getElementById（“myCheck2”）.checked=false；
document.getElementById（element.id）.checked=true；
document.getElementById（element.id.replace（“myCheck”、“text”））.style.display=“block”；
}

选中复选框时显示一些文本：

复选框： 已选中复选框！男性

---

已选中复选框！对于女性

我知道您正在使用

type=checkbox

，但对于这种验证，最好使用

type=radio

，这样，一旦您选择一个选项，其他选项将自动取消选择。有关更多信息，请参阅@DyeizonProcopiuk，这不允许返回到未定义的无线电状态。

const form = document.getElementById('example-form');
const inputs = form.getElementsByTagName('input');
const texts = document.getElementsByClassName('text');

for(let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function(evt) {
    toggleText(evt.target.value);
  })
}

function toggleText(tar) {
  for(let t = 0; t < texts.length; t++) {
    document.getElementsByClassName('text')[t].classList.add('hidden');
  }
  document.getElementById(`text--${tar}`).classList.remove('hidden')
}