單選框radio改變事件詳解（用的jquery的radio的change事件）

一、總結

1、用的jquery的radio的change事件：當元素的值發生改變時，會發生 change 事件，radio選擇不同選項的時候恰巧是值發生改變。

 

 

二、單選框radio改變事件詳解

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

 

$(document).ready(function() {
    $('input[type=radio][name=bedStatus]').change(function() {
        if (this.value == 'allot') {
            alert("Allot Thai Gayo Bhai");
        }
        else if (this.value == 'transfer') {
            alert("Transfer Thai Gayo");
        }
    });
});

 

三、單選框選擇不同的選項登錄的賬號密碼自動改變

 

 

<form class="am-form tpl-form-line-form" action="" method="post">
    
    <div class="am-form-group">
        <label class="am-radio-inline tpl-login-remember-me">
            <input class="tpl-form-input" type="radio" name="status" id="student" value="0" checked="checked">Student  6         </label>
        <label class="am-radio-inline tpl-login-remember-me">
            <input class="tpl-form-input" type="radio" name="status" id=teacher value="1" >Teacher  9         </label>
    </div>

    <div class="am-form-group">
        <input type="text" class="tpl-form-input" id="username" name="username" required="" value="" placeholder="username">

    </div>

    <div class="am-form-group">
        <input type="password" class="tpl-form-input" id="password" name="password" required="" value="" placeholder="password">

    </div>

    <!-- 驗證碼 -->
    <!-- <div class="am-form-group">
        <input type="text" class="tpl-form-input" id="user-name" name="code" placeholder="CAPTCHA">
    </div>
    <div class="am-form-group">
        <img width="100%" style="cursor: pointer" src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}?'+Math.random();" />
    </div> -->
    <!--End 驗證碼 -->


    <div class="am-form-group tpl-login-remember-me">
        <input id="remember-me" type="checkbox">
        <label for="remember-me">

            記住密碼
        </label>
        <label style="margin-left: 15px">
            <a href="{:url('login/register')}">  注冊</a>
        </label>

    </div> 

    <div class="am-form-group">

        <button type="submit" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>

    </div>
</form>

js

<script>
    $(document).ready(function() {
        $('input[type=radio][name=status]').change(function() {
            if (this.value == '0') {
                $("#username").val("student");
                $("#password").val("student");
            }
            else if (this.value == '1') {
                $("#username").val("teacher");
                $("#password").val("teacher");
            }
        });
    });         
</script>