心雨先生 2014-04-03 12:59 采纳率: 0%
浏览 970

多对单选框,怎么判断,让每个项都不能为空

1. 性别:




2. 婚姻状况:
未婚
已婚



3. 民族:
汉族
其他民族



4. 您校是:
寄宿制学校
非寄宿制学校



5. 年龄:
28岁以下
29-35岁
36-42岁
43-49岁
50岁以上



6. 学历:
高中或中专
大专
本科
研究生



7. 教龄:
3年以内
4-7年
8-12年
13-19年
20年以上



8. 学校类型:
村小
完小
九年一贯制学校
初中



9. 学校所在地:
乡镇
县城
城乡结合部
地级市
省会



10. 岗位职务:
普通教师
年级组长
副主任
主任
校级领导



11. 职称:
未评
小学二级
小一(中二)
小高(中一)
中高



12. 您教的年级:
四年级
五年级
六年级
初一
初二
初三


......后面有很多单选
在页面怎么写JS或JQuery让每一项都不能为空,有为空的项,提示有空项!
  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-01 22:12
    关注

    以下回答参考 皆我百晓生券券喵儿 等免费微信小程序相关内容作答,并由本人整理回复。

    要实现这个功能,你可以使用以下步骤来创建一个HTML表单,并使用jQuery来验证所有输入字段是否为空。这里我将提供一个基本的例子。

    首先,在你的HTML文件中添加一个表单元素和一些输入字段:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>问卷调查</title>
    </head>
    <body>
    
    <h2>问卷调查</h2>
    
    <form id="myForm" action="#" method="post">
      <div class="form-group">
        <label for="gender">性别:</label>
        <select name="gender" id="gender" required>
          <option value="">请选择</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div class="form-group">
        <label for="maritalStatus">婚姻状况:</label>
        <select name="maritalStatus" id="maritalStatus" required>
          <option value="">请选择</option>
          <option value="single">未婚</option>
          <option value="married">已婚</option>
        </select>
      </div>
      <div class="form-group">
        <label for="nationality">民族:</label>
        <select name="nationality" id="nationality" required>
          <option value="">请选择</option>
          <option value="chinese">汉族</option>
          <option value="other">其他民族</option>
        </select>
      </div>
      <!-- 更多类似的输入字段 -->
      <button type="submit">提交</button>
    </form>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function(){
      // 在这里添加你的JavaScript逻辑
    });
    </script>
    
    </body>
    </html>
    

    在这个例子中,我们使用了<input>标签作为输入字段,并在其中添加了required属性以确保它们必须填写。同时,我们还添加了一个<select>元素来选择不同的选项。

    然后,在你的JavaScript部分,你可以使用jQuery来检查每种类型的输入字段是否都被正确填写:

    $(document).ready(function() {
      $('#myForm').on('submit', function(event) {
        var gender = $('#gender option:selected').text();
        var maritalStatus = $('#maritalStatus option:selected').text();
        var nationality = $('#nationality option:selected').text();
    
        if (gender === "" || maritalStatus === "" || nationality === "") {
          alert("至少有一个输入项是空的");
          event.preventDefault(); // 阻止表单的默认行为,例如重定向到另一个页面
        }
      });
    });
    

    这段代码会在用户尝试提交表单之前阻止它并显示一条警告消息,如果任何输入字段为空。

    请注意,这只是一个基本的示例,实际应用可能需要更复杂的验证逻辑。例如,你可能会想要限制年龄范围、学历要求等。

    评论

报告相同问题?