Question

我在这里（以及通过谷歌）查看了许多不同的问题，但未能找到接近我所寻找的答案。

我有一个表单（使用表设置），它有多个单选按钮组，我试图使用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（）“调用将导致错误消息”（标签名称）必须完成“as以及在提交表单之前，会出现一个文本框供用户输入“纠正措施”。

非常感谢任何帮助

我也想远离jquery

Answer 1

＆＃13;

<script>
        $(document).ready(function() {
            $('.row').on('mouseover', function() {
                $(this).find('img').src('photo_hover.png');
                $(this).find('p').css('color', '#ff0000');
            });
            $('.row').on('mouseout', function() {
                $(this).find('img').src('photo.png');
                $(this).find('p').css('color', '#000');
            });
        });
    </script>

＆＃13;

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;
  }

}

＆＃13;

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

＆＃13;

Answer 2

JavaScript并不是真正需要的。您需要将inputs包裹在form元素中，然后您才会看到required将起作用。注意：我禁用了JS。

<强>更新

重新阅读您的帖子，以便我对代码进行了扩展，但我遗漏了一些内容...：\

＆＃13;

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;
  }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

当您选择一个单选按钮然后调用一个javascript函数并传递该单选按钮的名称类型。和根据该传递的参数，您可以区分单选按钮的类别并在javascript函数中使用if和else进行代码分离

<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>

使用可重复的Javascript函数来验证多个单选按钮组

3 个答案: