用jquery校驗radio單選按鈕（原創）

suboysugar發表於2015-11-20
原文網址 : https://flycode.co/archives/172797
jQuery
<!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="width: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;width: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;width: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>

 

如何聯絡我：【萬里虎】www.bravetiger.cn
【QQ】3396726884 （諮詢問題100元起，幫助解決問題500元起）
【部落格】http://www.cnblogs.com/kenshinobiy/


相關文章