Un seul sera sélectionné. Cela fonctionne correctement lorsque je sélectionne une femme pour la première fois. En fait, je veux implémenter que si je sélectionne un homme plutôt qu'une femme, je décocherai automatiquement si je coche une femme, un homme décochera automatiquement
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction()">
<input type="checkbox" id="myCheck2" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
function myFunction() {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked=false;
} else if(checkBox2.checked == true) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked=false;
}
else{
text.style.display = "none";
text2.style.display = "none";
}
}3 Réponses :
Vous devez savoir quelle case à cocher appelle la fonction et vous pouvez remettre l'élément pour vérifier l'élément réel.
<p>Display some text when the checkbox is checked:</p> <label for="myCheck">Checkbox:</label> <input type="checkbox" id="myCheck1" onclick="myFunction(this)"> <input type="checkbox" id="myCheck2" onclick="myFunction(this)"> <p id="text" style="display:none">Checkbox is CHECKED! for male</p> <p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
function myFunction(element) {
var boxes = [
[document.getElementById("myCheck1"), document.getElementById("text")],
[document.getElementById("myCheck2"), document.getElementById("text2")]
];
if (element.checked) {
boxes.forEach(([c, t]) => {
if (element === c) {
t.style.display = "block";
} else {
t.style.display = "none";
c.checked = false;
}
});
return;
}
boxes.forEach(([, t]) => t.style.display = "none");
}Une approche légèrement différente
<p>Display some text when the checkbox is checked:</p> <label for="myCheck">Checkbox:</label> <input type="checkbox" id="myCheck1" onclick="myFunction(this)"> <input type="checkbox" id="myCheck2" onclick="myFunction(this)"> <p id="text" style="display:none">Checkbox is CHECKED! for male</p> <p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
function myFunction(element) {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (element === checkBox && checkBox.checked) {
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked = false;
return;
}
if (element === checkBox2 && checkBox2.checked) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked = false;
return;
}
text.style.display = "none";
text2.style.display = "none";
}Vous ne savez pas pourquoi vous utiliseriez la case à cocher si une seule option était sélectionnée, puis-je suggérer d'utiliser des entrées radio à la place?
HTML
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')
}
Javascript
<form name="example-form" id="example-form">
<div id="radio-buttons">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div id="wrapper">
<p id="text--male" class="text hidden">Selected male</p>
<p id="text--female" class="text hidden">Selected female</p>
</div>
</form>
Je voulais juste montrer une autre façon simple de faire cela. Puisque vous avez myCheck1 associés à text et myCheck2 associé à text2 , j'ai décidé de renommer le text de l » id text1 . De cette façon, au lieu de faire de nombreux appels if / elseif / else, je peux contrôler plus facilement l'élément associé avec element.id.replace('myCheck', 'text') , etc.
Jetez un œil, beaucoup plus simple:
<p>Display some text when the checkbox is checked:</p> <label for="myCheck">Checkbox:</label> <input type="checkbox" id="myCheck1" onclick="myFunction(this)"> <input type="checkbox" id="myCheck2" onclick="myFunction(this)"> <p id="text1" style="display:none">Checkbox is CHECKED! for male</p> <p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
function myFunction(element) {
document.getElementById("text1").style.display = "none";
document.getElementById("text2").style.display = "none";
if(element.checked != true) {
return 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";
} Cela rendra très facile l'ajout d'une troisième option: pour d' other , par exemple, ce qui rendrait l'exemple ci-dessus plus inclusif.
Je comprends que vous utilisez
type=checkbox, mais pour ce type de vérification, il vaut mieux utilisertype=radio, de cette façon, une fois que vous sélectionnez une option, les autres seront automatiquement désélectionnées. Pour plus d'informations, consultez la référence Mozilla sur le type d'entrée: "radio"@DyeizonProcopiuk, cela ne permet pas de revenir à un état indéfini de la radio.