用jquery校验radio单选按钮(原创)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>预约骨科医生</title>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link href="<?php echo base_url('assets/css/order.css') ?>" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery.min.js') ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/main.js') ?>"></script>
</head>

<body id="wrap" style="">
<style>
    .deploy_ctype_tip{z-index:1001;width:100%;text-align:center;position:fixed;top:50%;margin-top:-23px;left:0;}.deploy_ctype_tip p{display:inline-block;padding:13px 24px;border:solid #d6d482 1px;background:#f5f4c5;font-size:16px;color:#8f772f;line-height:18px;border-radius:3px;}
</style>
<div class="banner">
    <div id="wrapper">
        <div id="scroller" style="float:none">
            <ul id="thelist"><img src="<?php echo base_url('assets/img/wx-logo-1.jpg') ?>" alt="预约骨科医生" style="100%">
            </ul>
        </div>
    </div>
    <div class="clr"></div>
</div>
<div class="cardexplain">
    <ul class="round">
        <li>
            <h2>预约骨科医生</h2>
            <div class="text">
                北京市XX骨科竭诚为您服务<br/>
                联系电话:001-XXXXXXXX</div>
        </li>
    </ul>
    <form method="post" action="<?php echo base_url("booking/go_select_hospital"); ?>" id="form" >
        <ul class="round">
            <li class="title mb"><span class="none">请选择医生</span></li>
            <li class="nob">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
                    <tbody>
                    <!-- 二维数组输出表格 -->
                    <?php foreach($dr_list as $k => $v){ ?>
                        <tr>
                            <th><?php echo $v['dr_name']; ?></th>
                            <td>
                                <?php echo $v['dr_hospital'].' '.$v['dr_title']; ?>
                            </td>
                            <td>
                                <input type="radio" name="dr_id" value="<?php echo $v['dr_id']; ?>" />
                            </td>
                        </tr>
                    <?php } ?>
                    </tbody>
                </table>
            </li>
        </ul>

        <div class="footReturn" style="text-align:center">
            <input id="nextBtn" type="submit" style="margin:0 auto 20px auto;90%" class="submit" value="下一步 选择医院">
        </div>
    </form>
    <form method="post" action="<?php echo base_url("booking/go_select_dept"); ?>" id="form" >
        <div class="footReturn" style="text-align:center">
            <input type="submit" style="margin:0 auto 20px auto;90%" class="submit" value="返回上一步 选择科室">
        </div>
    </form>

    <script>
        function showTip(tipTxt) {
            var div = document.createElement('div');
            div.innerHTML = '<div class="deploy_ctype_tip"><p>' + tipTxt + '</p></div>';
            var tipNode = div.firstChild;
            $("#wrap").after(tipNode);
            setTimeout(function () {
                $(tipNode).remove();
            }, 1500);
        }
        //校验单选按钮是否选中
        $(function(){
            $("#nextBtn").click(function(){
                var boolCheck=$('input:radio[name="dr_id"]').is(":checked");
                if(boolCheck == false){
                    showTip('请选择医生');
                    return false;
                }
                return true;
            });
        });


    </script>
</div>

</body>
</html>
原文地址:https://www.cnblogs.com/kenshinobiy/p/4981747.html