使用可重複的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

類別這個代碼的困難在於，你擁有同一個廣播組的所有單選按鈕部分，我有多個組中有「相同的兩個選項」下襬。我再次嘗試確定是否選擇了「是」或「否」選項以確定是否需要解釋。 – Dragonman86

您可以更改每個組的收音機「名稱」屬性，而不是使用'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函數來驗證多個單選按鈕組

回答

相關問題