#javascript #if-statement #checkbox
#javascript #if-оператор #флажок
Вопрос:
Будет выбран только один. Он правильно работает, когда я сначала выбираю женский. На самом деле я хочу реализовать это, если я выберу male, то female автоматически снимет флажок снова, если я проверю female, male автоматически снимет флажок
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";
}
} <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>
Комментарии:
1. Я понимаю, что вы используете
type=checkbox, но для такого рода проверки лучше использоватьtype=radio, таким образом, как только вы выберете опцию, остальные будут отменены автоматически. Для получения дополнительной информации см. Ссылку Mozilla о типе ввода: «radio»2. @DyeizonProcopiuk, это не позволяет вернуться к неопределенному состоянию радио.
Ответ №1:
Вам нужно знать, какой флажок вызывает функцию, и вы можете передать элемент для проверки фактического элемента.
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 amp;amp; checkBox.checked) {
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked = false;
return;
}
if (element === checkBox2 amp;amp; checkBox2.checked) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked = false;
return;
}
text.style.display = "none";
text2.style.display = "none";
} <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");
} <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> Ответ №2:
Не уверен, зачем использовать флажок, если будет выбран только 1 вариант, могу ли я предложить вместо этого использовать радиовходы?
HTML
<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>
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')
}
Ответ №3:
Просто хотел показать другой, простой способ сделать это. Поскольку вы myCheck1 связаны с text и myCheck2 связаны с text2 , я решил переименовать text ‘s id в text1 . Таким образом, вместо выполнения многочисленных вызовов if / elseif / else, я могу легче управлять связанным элементом с element.id.replace('myCheck', 'text') помощью и т.д..
Посмотрите, намного проще:
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";
} <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> Это позволит очень легко добавить третий вариант: например other , для, что сделало бы приведенный выше пример более всеобъемлющим.