根据是/否显示/隐藏文本框答案

【问题标题】：show/hide textbox based on yes/no根据是/否显示/隐藏文本框
【发布时间】：2013-10-16 13:50:13
【问题描述】：

我有一个调查，30 多个是/否问题（单选按钮）；如果选择否，则显示文本框以说明理由，如果选择否，则此文本框是必需的。我一个一个都做不出来。如何使用通配符和循环来做到这一点。

<tr>
    <td>1</td>
    <td width="600px">question 1?</td>
    <td width="65px">
        <asp:RadioButton ID="rdM1Y" runat="server" Text="Yes" GroupName="rdM1" />
        <asp:RadioButton ID="rdM1N" runat="server" Text="No" GroupName="rdM1" />
    </td>
    <td><asp:TextBox ID="txtCM1" runat="server" /></td>
</tr>
<tr>
    <td>2</td>
    <td width="600px">question 2?</td>
    <td width="65px">
        <asp:RadioButton ID="rdM2Y" runat="server" Text="Yes" GroupName="rdM2" />
        <asp:RadioButton ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />
    </td>
    <td><asp:TextBox ID="txtCM2" runat="server" /></td>
</tr>

如果他们选择否，我需要验证那些文本框是必需的

【问题讨论】：

标签： javascript jquery wildcard

【解决方案1】：

好的，所以：

包括 jQuery（让一切变得更简单）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

为所有“否”单选按钮添加 radNo 类：

<asp:RadioButton class="radNo" ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />

为所有文本框添加txtNo 类：

<asp:TextBox class="txtNo" ID="txtCM2" runat="server" />

添加脚本：

<script type="text/javascript">
$(function(){
    $('.radNo').click(function(){
        var c = $(this).is(':checked');
        $(this).parents('tr').find('txtNo').toggle(c);
        if (c) {
            $(this).parents('tr').find('txtNo').focus();
        }
    });

    // validate that there's text if select NO
    $('.txtNo').bind('blur', function(){
        if ($(this).val().length < 1) {
            $(this).focus(); 
            alert('please provide a reason');
        }
    });       
});
</script>

应该这样做，希望我理解得很好并且对你有帮助。

【讨论】：

谢谢。但是如果他们选择否，如何对文本框进行验证？
我会添加我的答案
谢谢加尔。验证有效。但是如果用户不小心点击否，他们不想给出理由。我应该让他在没有给出理由的情况下对同一个问题单击“是”。请帮忙

【解决方案2】：

生成的 HTML - 注意 textarea ID 等于 radio 按钮名称

<table>
    <tr>
    <td>1</td>
    <td width="600px">question 1?</td>
    <td width="65px">
        <label><input type="radio" name="rdM1" /> Yes</label>
        <label><input type="radio" name="rdM1" class="give_reason" /> No</label>
    </td>
    <td><textarea id="rdM1" name="rdM1-reason"></textarea></td>
</tr>
</table>

CSS

textarea {display: none;}

Javascript

$(document).on('click', 'input:radio', function(){
   el = $('#' + this.name); 
   ($(this).hasClass('give_reason'))? el.show() : el.hide(); 
});

DEMO

【讨论】：

【解决方案3】：

首先给 no-radiobuttons 一个通用类，例如说它“noRadio”。然后，您可以使用该类监听所有单选按钮的点击事件。在事件处理函数中，您可以找到相应的文本框并显示它。我的示例代码如下：

$(".noRadio").click(function(e) {
    // get id of the clicked radio button
    var id = $(e.target).attr("id");
    // remove "rdM" and "N" from id and get pure question number
    id = id.replace("rdM", "").replace("N", "");
    // select the corresponding text box by its id, e.g. "#txtCM2" if "#rdM2N" selected
    $("#txtCM" + id).show();
});

我在我的项目中尝试过这种方法，它很有效。

【讨论】：

【解决方案4】：

$(document).on('click', 'input:radio', function(){
$('table').each(function(){
if($('input[type= radio]:checked').val() == no)) 
{
    $('textbox').show();
}
});

  });

【讨论】：