本博文主要就是验证单选框不能为空,现在有一个举报框和一个举报成功的信息反馈框,点击举报框中的提交按钮,如果单选框没有选,则提示“*必须选择一项举报原因”,如果已经选择,则出现举报成功的信息反馈框
示例图:
验证单选框:
举报成功信息提示框:
代码部分:
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" οnclick="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();
}
});