Использование повторяемой функции Javascript для проверки нескольких групп переключателей

Я рассмотрел здесь много разных вопросов (а также через Google) и не смог найти ответ, который близок к тому, что я ищу.Использование повторяемой функции Javascript для проверки нескольких групп переключателей

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

Я пытаюсь написать функцию, которая будет проверять, какой переключатель выбран и выполнять другую задачу в зависимости от того, какой выбор сделан.

HTML код:

<tr> 
     <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td> 
     <td> 
      <label><input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label> 
      <label><input name="approve" type="radio" required id="approve_1" value="No">No</label> 
     </td> 
    </tr>

Для каждого раздела, как это (и у меня есть около 15 из этих разделов) Я пытаюсь к нам в «OnChange =» SomeFunction()»вызов, который приведет к сообщение об ошибке «(имя метки) должно быть завершено», а также вызвать текстовое поле появится для пользователя, чтобы ввести «корректирующих действий» в перед отправкой формы.

Любая помощь будет принята с благодарностью

Я также хотел бы быть в стороне от jquery

источник

2015-11-08 Dragonman86

JavaScript на самом деле не нужен. Вам нужно обернуть ваш inputs в элементе form, тогда вы увидите, что required будет работать. Примечание. Я отключил JS.

UPDATE

Перечитайте свой пост, так что я дополненной кода, но я что-то не хватает ...: \

var submit = document.getElementById('submit'); 
 
var approve = document.getElementsByClassName('approve'); 
 

 
function approveRad() { 
 
    var selected = false; 
 
    for (var i = 0; i < approve.length; i++) { 
 
    if (approve[i].checked) { 
 
     selected = true; 
 
     break; 
 
    } 
 
    } 
 
    if (!selected) { 
 
    alert(approve.id + " must be completed"); 
 
    return; 
 
    } 
 

 
}

tr { 
 
    width: 30%; 
 
} 
 
input { 
 
    outline: 1px solid blue; 
 
}

<form action="return false"> 
 
    <table> 
 

 
    <tr> 
 
     <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td> 
 
     <td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_0" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_1" value="No">No</label> 
 

 
     <td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_2" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_3" value="No">No</label> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_4" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_5" value="No">No</label> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_6" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_7" value="No">No</label> 
 

 

 

 
     </td> 
 
    </tr> 
 
    </table> 
 
    <input id="submit" type="submit" value="Submit" onsubmit="approveRad();" /> 
 
</form>

источник

2015-11-08 03:48:02 zer00ne

Трудность с этим кодом состоит в том, что у вас есть все радиокнопки из той же группы радио, что у меня есть несколько групп с «теми же двумя параметрами» внутри t рубчик. Опять же, я пытаюсь определить, была ли выбрана опция «Да» или «Нет», чтобы определить, нужно ли объяснение. – Dragonman86

Вы изменяете атрибут «name» для радиостанций для каждой группы, и вместо использования 'getElementsByName' используйте' querySelectorAll ('input [type = "radio"]') '. Вы не очень четко относились к отдельным группам и не имели живой демоверсии. Дайте мне знать, если вы не понимаете. – zer00ne

с вызовом 'querySelectorAll ('input [type =" radio "]')' будет ли это захватывать все переключатели за один раз или только группу, для которой был вызван вызов? – Dragonman86

При выборе радио затем вызовите функцию javascript и передайте имя этого переключателя типа. И На основе этого передаваемого параметра можно выделить категорию радио-кнопки и в JavaScript использования функции, если и еще для кода Разделения

<head> 
    <script type="text/javascript"> 
     function clicked(type){ 
       if(type == 'company'){ 
        var selectedRadio = document.getElementsByName(type); 
        for (i=0; i<selectedRadio.length; i++){ 
          if(selectedRadio[i].checked == true) 
           alert('you select ' + selectedRadio[i].value); 
        } 
       }else if(type == 'post'){ 
        var selectedRadio = document.getElementsByName(type); 
        for (i=0; i<selectedRadio.length; i++){ 
          if (selectedRadio[i].checked == true) 
           alert('you select ' + selectedRadio[i].value); 
        } 
       } 

      } 
    </script> 

</head> 

<body>  
<form> 
Select company : 
<br> 
    <input type="radio" id="company" name="company" value="TCS" onclick="clicked('company')"> TCS 
    <br> 
    <input type="radio" id="company" name="company" value="WIPRO" onclick="clicked('company')"> WIPRO 
<hr> 
Select Desigination : 
<br> 
    <input type="radio" id="post" name="post" value="manager" onclick="clicked('post')" >manager 
    <br> 
    <input type="radio" id="post" name="post" value="developer" onclick="clicked('post')">developer 
</form> 
<hr> 





</body> 
</html>

источник

2015-11-08 06:09:30 shivam

var submit = document.getElementById('submit'); 
 
var approve = document.getElementsByClassName('approve'); 
 

 
function approveRad() { 
 
    var selected = false; 
 
    for (var i = 0; i < approve.length; i++) { 
 
    if (approve[i].checked) { 
 
     selected = true; 
 
     break; 
 
    } 
 
    } 
 
    if (!selected) { 
 
    alert(approve.id + " must be completed"); 
 
    return; 
 
    } 
 

 
}

tr { 
 
    width: 30%; 
 
} 
 
input { 
 
    outline: 1px solid blue; 
 
}

<form action="return false"> 
 
    <table> 
 

 
    <tr> 
 
     <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td> 
 
     <td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_0" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_1" value="No">No</label> 
 

 
     <td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_2" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_3" value="No">No</label> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_4" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_5" value="No">No</label> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_6" value="Yes">Yes</label> 
 
     <label> 
 
      <input name="approve" class="approve" type="radio" required id="approve_7" value="No">No</label> 
 

 

 

 
     </td> 
 
    </tr> 
 
    </table> 
 
    <input id="submit" type="submit" value="Submit" onsubmit="approveRad();" /> 
 
</form>

источник

2016-01-08 10:43:05

Использование повторяемой функции Javascript для проверки нескольких групп переключателей

ответ

Смежные вопросы