Требование выбора переключателя в Javascript - PullRequest
Новая
       18

Требование выбора переключателя в Javascript

0 голосов
/ 12 мая 2019

Я абсолютный новичок в JS, пытаюсь создать радиокнопку с двумя опциями (влево / вправо), в которой для продолжения программы необходимо выбрать один из двух вариантов, иначе будет отображатьсяэкран ошибок.

У меня есть код, который будет мешать участнику продолжать работу независимо от того, что он нажимает (т.е. ошибка появляется независимо от того, что происходит), или код, который позволит участнику продолжить работу независимо от того, что (т.е. программа продолжаетсядаже если они не выбирают один из вариантов.) Я чувствую, что это может быть что-то с моими логическими операторами, но я действительно не уверен.Я пытался использовать ручной XOR, и это, похоже, не является проблемой.

Я использую адаптированный код, поэтому, пожалуйста, дайте мне знать, если есть что-то еще, что я могу / должен включить! 

<div class="radio"><label><input id="option1"  name="option1" type="radio" value="Right"  />Right</label></div>
<div class="radio"><label><input id="option1" name="option1" type="radio" value = "Left" />Left</label></div>

Код, который вызывает ошибку, независимо от того, что: 

<input onclick="function filledOut(id) { return (document.getElementById(id).value == 'Left')} if(filledOut('option1') ) { next(); }else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>
</div>

Код, который вызывает продолжение программы: 

<input onclick="function filledOut(id) { return ((document.getElementById(id).value == 'Left')|| (document.getElementById(id).value == 'Right'))} if(filledOut('option1') ) { next(); } else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>
</div>

Ответы [ 3 ]

0 голосов
/ 12 мая 2019

Что я понял, так это то, что вам нужно показать ошибку, если ничего не проверено, и продолжить, если один из них отмечен.

Чтобы сделать это, вам нужно будет проверить, проверена ли какая-либо из них.не проверяя его значение и присваивайте каждому переключателю уникальный идентификатор.Вы можете сделать что-то похожее на это 

function isChecked(id){//Instead of filledOut
  return document.getElementById(id).checked;
 //.checked returns true or false
}
if (isChecked('option1') || isChecked('option2')){
 next();
}else{
 alert("Your error message")
}

Еще одна функция для получения значения, если она вам нужна: 

function getCheckedBtnValue(){
  if(isChecked('option1')) return document.getElementById('option1').value
  if(isChecked('option2')) return document.getElementById('option2').value
  return null
}
//You can also use this function to check if any of them is checked
const value = getCheckedBtnValue();
if(value){
 next();
}else{
 alert("Your error message");
}

Также старайтесь не писать JavaScript внутри элементов HTML, это может бытьтрудно читать часто.Keep JavaScripting.

0 голосов
/ 12 мая 2019 
<form name="formName">
    <input type="radio" name="option1" id="option1" value="Right"/>Right
    <input type="radio" name="option2" id="option2" value="Left"/>Left
</form>


<input onclick="checkResponse()" type="button" value="Continue" />

Функция checkResponse проверит, выбраны ли какие-либо параметры, когда пользователь нажимает кнопку продолжения. 

<script type="text/javascript">
    function checkResponse(){
        if (isChecked('option1') || isChecked('option2')){
            next();
        }else{
            alert("Your error message")
        }
    }

    function isChecked(id){

     return document.getElementById(id).checked; //returns true if any options are selected

    }

</script>
0 голосов
/ 12 мая 2019

Вам нужно изменить идентификаторы на что-то другое. В случае переключателей «имя» - это группа переключателей. Вам не нужны идентификаторы, если вы не собираетесь индивидуально просматривать каждый элемент, и если вы даете им идентификаторы, они должны отличаться от любого другого идентификатора, а также от атрибутов «name».

https://www.w3schools.com/tags/att_input_type_radio.asp

<input id="optionRight" name="groupName" type="radio" value="Right" /> <input id="optionLeft" name="groupName" type="radio" value="Left" />

Кроме того, вы можете сделать одну из переключателей, выбранных по умолчанию.

Как выбрать переключатель по умолчанию?

<input id="option1" name="groupName" type="radio" value="Right" checked="checked" />

...