获得html表单中radio name相同的数组的值并判断每个选项不能为空

最新推荐文章于 2022-12-06 18:22:03 发布

tian_fighting

最新推荐文章于 2022-12-06 18:22:03 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangweiguangsunjiao/article/details/78182638

本文介绍了一个使用HTML和JavaScript实现的表单验证示例。通过遍历表单中的问题并设置单选按钮来收集用户答案。利用jQuery简化了JavaScript代码，实现了对每个问题至少选择一个答案的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form method="post" action="" onsubmit="return aa()">

    {foreach from="$info" item="fee"}
    <!--问题：-->{$fee.id}、{$fee.question}<br>
<label class="ui-radiobox" rel="common_user_type">
    <input type="radio" name="score{$fee.id}" value="{$fee.a_score}" >  A:{$fee.a_choice}    
</label>
<label class="ui-radiobox" rel="common_user_type">

    <input type="radio" name="score{$fee.id}" value="{$fee.b_score}">  B:{$fee.b_choice}    
</label>
    <label class="ui-radiobox" rel="common_user_type">

    <input type="radio" name="score{$fee.id}" value="{$fee.c_score}">  C:{$fee.c_choice}    
    </label>
        <label class="ui-radiobox" rel="common_user_type">

    <input type="radio" name="score{$fee.id}" value="{$fee.d_score}">  D:{$fee.d_choice}
        </label>
    <br>
    {/foreach}
    <input type="submit">
</form>

jq代码

<script type="text/javascript">
    function aa(){
        var err_msg='';
        var arr_name=[];
        $("input:radio[name^=score]").each(function(){
            if (!arr_name[this.name]){
                arr_name[this.name]=1;
            }
        });

        for (name in arr_name)
        {
            //alert(name);   //score8   score9  score7  score6
            //console.log($("input:radio[name="+name+"]").val());
            if ($("input:radio[name="+name+"]:checked").length==0)
            {
                var names = name.substr(5);
                //alert(names);
                err_msg+="第"+names+"题还没选择答案\r\n";
            }

            if (err_msg!="")
            {
                alert(err_msg);
                return false;
            }
        }
</script>