单选框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
</label>
<label class="am-radio-inline tpl-login-remember-me">
<input class="tpl-form-input" type="radio" name="status" id=teacher value="1" >Teacher
</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>