[英]Hide/show textboxes with jQuery based on radio button selection
我需要在我的表單上單擊某個單選按鈕時顯示某些文本框,否則文本框應保持隱藏狀態。 這是我的一個例子:
HTML:
Radio buttons:
<p>Show textboxes<input type="radio" name="radio1" value="Show" onClick="getResults()">Do nothing<input type="radio" name="radio1" value="Nothing"></p>
Textboxes:
<div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
jQuery的:
$(document).ready(function() {
$(".text").hide()
function getResults() {
$(".text").show()
};
});
當我取出.show()代碼時,文本框保持隱藏狀態。 我需要在選中帶有onClick事件的單選按鈕時顯示它們。 任何幫助將非常感激。
使用Javascript
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
HTML
<p>Show textboxes
<input type="radio" name="radio1" id="r1" value="Show">Do nothing
<input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
<p>Textbox #1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Textbox #2
<input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>
您可以使用.click()
代替內聯onclick()
javascript:
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).click(function() {
$(".text").show()
});
});
但是,您應該對input
元素使用.change()
事件:
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).change(function() {
$(".text").show()
});
});
您可以使用此代碼:
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});
內聯事件不是recomanded,所以綁定一個更改事件的收音機,如果值是Show
,那么顯示它!
目前,你可以通過點擊的對象作為this
參數的形式getResults()
如果this
是指當前點擊的對象
見下文
腳本
$(document).ready(function() {
$(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};
HTML
<input type="radio" name="radio1" value="Show" onClick="getResults(this)">
Do nothing ^^^^
<input type="radio" name="radio1" value="Nothing" onclick="getResults(this)">
^^^^
小提琴-->
http://jsfiddle.net/tT48f/7/
查看此演示jsFiddle
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});
試試:
$(document).ready(function() {
$(".text").hide();
});
function getResults() {
$(".text").show();
};
1. $("input[name='Radio1']").change(function(){
if($(this).val()=="Ya") {
$("#QUESTION_1").fadeIn(250);
}
else {
$("#QUESTION_1").fadeOut(250);
} });
<div class="RdoClick">
<asp:RadioButton ID="RadioSugges" runat="server" GroupName="PopupRadio" Text=" C. Insert your suggestion:" />
</div>
<asp:TextBox ID="TextBox1" runat="server" class="PopupTxtBox" PlaceHolder="Enter your suggestion..."
onClick="check();" TabIndex="1" />
<script type="text/javascript">
function check() {
document.getElementById('<%=RadioSugges.ClientID%>').checked = true;
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.