jquery - 选中复选框时显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19670323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - show textbox when checkbox checked
提问by Giri
I have this form
我有这个表格
<form action="">
<div id="opwp_woo_tickets">
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
</div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
</div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
</div>
</div>
</form>
As of now, I'm using this jquery code to show textbox when checkbox checked.
截至目前，我正在使用此 jquery 代码在选中复选框时显示文本框。
jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
if ($(this).is(':checked')) $('div.max_tickets').show();
else $('div.max_tickets').hide();
}).change();
});
It works fine, but it shows all textboxes when checked.
它工作正常，但在选中时会显示所有文本框。
Can someone help me to fix it?
有人可以帮我修复它吗？
Here is the demo of my problem.
这是我的问题的演示。
回答by James Donnelly
As your dividers are placed next to your checkboxes, you simply need to use jQuery's next()methodto select the correct elements:
当您的分隔线放置在复选框旁边时，您只需使用jQuery 的next()方法来选择正确的元素：
if ($(this).is(':checked'))
$(this).next('div.max_tickets').show();
else
$(this).next('div.max_tickets').hide();
From the documentation (linked above), the next()method selects:
从文档（上面链接）中，该next()方法选择：
...the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
...匹配元素集中每个元素的紧随其后的兄弟元素。如果提供了选择器，则仅当它与该选择器匹配时才检索下一个兄弟。
Here we're selecting the next div.max_ticketselement. However in your case just using next()with no parameters would suffice.
这里我们选择下一个div.max_tickets元素。但是，在您的情况下，仅使用next()不带参数就足够了。
回答by charlietfl
Assuming markup will stay in same order can use next()
假设标记将保持相同的顺序可以使用 next()
jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
$(this).next()[ this.checked ? 'show' : 'hide']();
}).change();
});
回答by samsquanch
Maybe try selecting the next element only?
也许尝试只选择下一个元素？
change:
改变：
if ($(this).is(':checked')) $('div.max_tickets').show();
to:
到：
if ($(this).is(':checked')) $(this).next('div.max_tickets').show();
回答by cssyphus
Change:
改变：
if ($(this).is(':checked')) $('div.max_tickets').show();
To:
到：
if ($(this).is(':checked')) $(this).next('div.max_tickets').show();
回答by David says reinstate Monica
While you may need a JavaScript solution for other reasons, it's worth noting that this can be achieved with pure CSS:
虽然您可能出于其他原因需要 JavaScript 解决方案，但值得注意的是，这可以通过纯 CSS 实现：
input + div.max_tickets {
display: none;
}
input:checked + div.max_tickets {
display: block;
}
Or, with jQuery, the simplest approach seems to be:
或者，使用 jQuery，最简单的方法似乎是：
// binds the change event-handler to all inputs of type="checkbox"
$('input[type="checkbox"]').change(function(){
/* finds the next element with the class 'max_tickets',
shows the div if the checkbox is checked,
hides it if the checkbox is not checked:
*/
$(this).next('.max_tickets').toggle(this.checked);
// triggers the change-event on page-load, to show/hide as appropriate:
}).change();
Reference:
参考：
- CSS:
- jQuery:
- CSS：
- jQuery：
回答by jforjs
Put a div across your checkbox and text box
在复选框和文本框上放置一个 div
<form action="">
<div id="opwp_woo_tickets">
<div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
</div>
</div>
<div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
</div>
</div>
<div>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
<div class="max_tickets">
<input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
</div>
</div>
</div>
</form>
and replace your jquery code with this one below,
并用下面的代码替换您的 jquery 代码，
jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
else $(this).parent().children('div.max_tickets').hide();
}).change();
});
I have tested it and it works.
我已经测试过它并且它有效。
回答by madhuri
protected void EnableTextBox()
{
int count = int.Parse(GridView1.Rows.Count.ToString());
for (int i = 0; i < count; i++)
{
CheckBox cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");
CheckBox cb1 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox2");
CheckBox cb2 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox3");
TextBox tb = (TextBox)GridView1.Rows[i].Cells[4].FindControl("txtration");
TextBox tb1 = (TextBox)GridView1.Rows[i].Cells[5].FindControl("txtjob");
TextBox tb2 = (TextBox)GridView1.Rows[i].Cells[6].FindControl("txtaadhar");
if (cb.Checked == true)
{
tb.Visible = true;
}
else
{
tb.Visible = false;
}
if (cb1.Checked == true)
{
tb1.Visible = true;
}
else
{
tb1.Visible = false;
}
if (cb2.Checked == true)
{
tb2.Visible = true;
}
else
{
tb2.Visible = false;
}
}
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
EnableTextBox();
}
