带有javascript的单选按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有javascript的单选按钮相关的知识，希望对你有一定的参考价值。
我有一个单选按钮，它显示一些带有javascript的文本框。我的代码具有onclick功能，因此一开始它会显示所有文本框。我试图检查功能选择拳头选项，以便它只显示第一个文本框加载（不单击），但没有运气。我不知道如何检查第一个选项，只显示第一个文本框！
<div class="radioBtns">
<label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/><span>Mobile</span></label>
<label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" /><span>Email</span></label>
</div>
<div class="mobilelogin"><div class="form-group">
<input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">
</div>
</div>
<div class="emaillogin"><div class="form-group">
<input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">
</div>
<div class="form-group">
<input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">
</div>
</div>
<script type="text/javascript">
function showLogin(val)
{
if(val==1)
{
$('.emaillogin').css('display','none');
$('.mobilelogin').css('display','');
}
else
{
$('.mobilelogin').css('display','none');
$('.emaillogin').css('display','');
}
}
</script>
答案
当页面仅加载hide您的电子邮件输入框时，即：
//to hide email textbox on load
$('.emaillogin').css('display', 'none');
function showLogin(val) {
if (val == 1) {
$('.emaillogin').css('display', 'none');
$('.mobilelogin').css('display', '');
} else {
$('.mobilelogin').css('display', 'none');
$('.emaillogin').css('display', '');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioBtns">
<label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/><span>Mobile</span></label>
<label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" /><span>Email</span></label>
</div>
<div class="mobilelogin">
<div class="form-group">
<input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">
</div>
</div>
<div class="emaillogin">
<div class="form-group">
<input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">
</div>
<div class="form-group">
<input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">
</div>
</div>另一答案
获取checked input的值，然后以值作为参数调用showLogin。
function showLogin(val) {
if (val == 1) {
$('.emaillogin').css('display', 'none');
$('.mobilelogin').css('display', '');
} else {
$('.mobilelogin').css('display', 'none');
$('.emaillogin').css('display', '');
}
}
const val = document.querySelector('input:checked').value;
if (val) {
showLogin(val);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioBtns">
<label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType"
value='1' onclick="showLogin(1)" /><span>Mobile</span></label>
<label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0'
onclick="showLogin(0)" /><span>Email</span></label>
</div>
<div class="mobilelogin">
<div class="form-group">
<input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">
</div>
</div>
<div class="emaillogin">
<div class="form-group">
<input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">
</div>
<div class="form-group">
<input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">
</div>
</div>另一答案
实际上您只是忘了导入JQuery库：
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div class="radioBtns">
<label for='rbtnLoginTypeMobile'><input checked type="radio" id="rbtnLoginTypeMobile" name="rbtnLoginType" value='1' onclick="showLogin(1)"/><span>Mobile</span></label>
<label for='rbtnLoginTypeEmail'><input type="radio" id="rbtnLoginTypeEmail" name="rbtnLoginType" value='0' onclick="showLogin(0)" /><span>Email</span></label>
</div>
<div class="mobilelogin"><div class="form-group">
<input type="number" id="mobilelogin" class="form-control form-control-user" name="mobilelogin" placeholder="<?php _e('Mobile') ?>">
</div>
</div>
<div class="emaillogin"><div class="form-group">
<input type="Email" id="ُemaillogin" class="form-control form-control-user" name="emaillogin" placeholder="<?php _e('Email') ?>">
</div>
<div class="form-group">
<input type="number" id="ُemaillogin-ver-code" class="form-control form-control-user" name="emaillogin-ver-code" placeholder="<?php _e('Email Verification Code') ?>">
</div>
</div>
<script type="text/javascript">
function showLogin(val)
{
if(val==1)
{
$('.emaillogin').css('display','none');
$('.mobilelogin').css('display','');
}
else
{
$('.mobilelogin').css('display','none');
$('.emaillogin').css('display','');
}
}
</script>以上是关于带有javascript的单选按钮的主要内容，如果未能解决你的问题，请参考以下文章