jQuery单选按钮检查添加类,否则删除类如果单选按钮没有选中?
我需要2个单选按钮jQuery单选按钮检查添加类,否则删除类如果单选按钮没有选中?
jQuery(document).ready(function($) {
if ($('#user_personal').is(':checked')) {
$('.user_company').addClass('hidden');
$('.user_personal').removeClass('hidden');
} else if ($('#user_company').is(':checked')) {
$('.user_personal').addClass('hidden');
$('.user_company').removeClass('hidden');
}
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-type-item">
<input name="user" id="user_personal" type="radio">
</div>
<div class="user-type-item">
<input name="user" id="user_company" type="radio">
</div>
<div class="user_personal">
<select name="" id="" class="form-control">
<option value="0"></option>
</select>
</div>
<div class="user_company">
<input type="text" class="form-control">
</div>
现在我已经使用jQuery检查无线电 “#user_personal”, “div.user_company” 添加 “隐藏” 类和“分区。 user_personal“删除”隐藏“类。 当我检查收音机“#user_company”,“div.user_personal”添加“隐藏”类和“div.user_company”删除“隐藏”类。
谢谢大家!
使用toggleClass
至选择和输入
$('.user-type-item input').click(function(){
$('.user_personal,.user_company').toggleClass('hidden');
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-type-item">
<input name="user" id="user_personal" type="radio" checked>
</div>
<div class="user-type-item">
<input name="user" id="user_company" type="radio">
</div>
<div class="user_personal hidden">
<select name="" id="" class="form-control">
<option value="0">選択してください。</option>
</select>
</div>
<div class="user_company">
<input type="text" class="form-control">
</div>
多个元件之间切换显示:
$('.user-type-item input').click(function() {
var ind = $(this).parent().index();
$('.el').addClass('hidden');//hide all inputs
$('.el').eq(ind).toggleClass('hidden');//show only the input coresponding to the checked radio
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="user-type-item">
<input name="user" id="user_personal" type="radio" checked>
</div>
<div class="user-type-item">
<input name="user" id="user_company" type="radio">
</div>
<div class="user-type-item">
<input name="user" id="user_company" type="radio">
</div>
</div>
<div class="el user_personal">
<select name="" id="" class="form-control">
<option value="0">選択してください。</option>
</select>
</div>
<div class="el user_company hidden">
<input type="text" class="form-control">
</div>
<div class="el user_company hidden">
<input type="text" class="form-control" value="2">
</div>
谢谢!但是如果我有3个单选按钮和3个div,该怎么办? –
同样的原则适用于你隐藏所有的输入并只显示当前的一个 – madalinivascu
我更新的答案 – madalinivascu
有无你试图做什么? –
这看起来像一个作业? –
我不确定jQuery,期待帮助 –