验证单选框不能为空(以举报为例)

本博文主要就是验证单选框不能为空,现在有一个举报框和一个举报成功的信息反馈框,点击举报框中的提交按钮,如果单选框没有选,则提示“*必须选择一项举报原因”,如果已经选择,则出现举报成功的信息反馈框

示例图:

验证单选框不能为空(以举报为例)

验证单选框:

验证单选框不能为空(以举报为例)

举报成功信息提示框:

验证单选框不能为空(以举报为例)


代码部分:

html代码:

<!--举报弹框 -->
<div class="jb_tk">
<strong><span class="xinghao">*</span>不良信息举报 :</strong>
<dl>

<li>您举报文章:<span class="jb_title">文章的title</span></li>
<li>
举报原因:
<table>
<tr>
<td>
<input type="radio" name="aihao" value="色情" id="sq"/>色情
<input type="radio" name="aihao" value="政治" id="zz"/>政治
<input type="radio" name="aihao" value="抄袭" id="cx"/>抄袭
<input type="radio" name="aihao" value="广告" id="gg"/>广告
<input type="radio" name="aihao" value="招聘" id="zp"/>招聘
<input type="radio" name="aihao" value="骂人" id="mr"/>骂人
<input type="radio" name="aihao" value="其他" id="qt"/>其他

</td>
</tr>
</table>
</li>
<li>原因补充:</li>
<li><textarea style="width: 270px;height: 100px;" placeholder="最多只允许输入50个字" maxlength="50"></textarea></li>
<li><span style="color: red;display: none;" id="s1">*必须选择一项举报原因</span></li>
<li class="jb_button">
<input type="submit" value="提交" class="jb_tijiao" onclick="check()"/>
<input type="button" id="close" value="取消"/>
</li>

</dl>
</div>

举报成功信息提示框:

<!--举报信息回馈弹框 -->
<div class="jb_tk_success">
<p>感谢您的举报,我们会尽快审核!</p>

<p><input type="button" id="jb_cancel" value="关闭"/></p>
</div>

js代码:

//验证单选框
$(".jb_tk_success").hide();
$(".jb_tijiao").on("click",function(){
            if(!document.getElementById("sq").checked && !document.getElementById("zz").checked
            && !document.getElementById("cx").checked && !document.getElementById("gg").checked
            && !document.getElementById("zp").checked && !document.getElementById("mr").checked
            && !document.getElementById("qt").checked){
               document.getElementById("s1").style.display="initial";
               return false;
               }else{
                document.getElementById("s1").style.display="none";
                $(".jb_tk").hide();
$(".jb_tk_success").show();
               }
      });