Question

我正在处理需要验证的表单。表单的一小部分要求用户在2个选项“是”，“否”之间进行选择。如果没有被选中，我需要他们输入一个原因，否则如果选择是，我不需要理由（即使输入字段可能被隐藏然后＆lt; - 这只能通过javascript实现我猜？）

我如何创建此规则？

让我们说表格的一部分看起来像这样

<form  id="Form" method="get" action="">
<fieldset>
<legend>form</legend>
Yes:<input name="choice" type="radio" value="Yes"/><br>
No:<input name="choice" type="radio" value="No"/><br>
<label for="reaason">Reason</label>
<input id="reason" name="reason"  />
</fieldset>
</form>

Answer 1

你可以这样做

$('input[name="choice"]').change(function(){
    if($(this).val() == 'No'){
        $('.reason').show();
    }
    else{
        $('.reason').hide();
    }
});

示例： http://jsfiddle.net/fh2Q9/

注意：我更改了一点HTML，给出了“原因”input和label一个类，因此更容易隐藏。

Answer 2

此代码应该执行您想要的操作：http://jsfiddle.net/KJCDS/

我不得不稍微修改一下html。

HTML：

<form  id="Form" method="get" action="">
<fieldset>
<legend>form</legend>
Yes:<input name="choice" type="radio" value="Yes" checked='true'/><br>
No:<input name="choice" type="radio" id='rdoNo' value="No"/><br>
<label id="lblReason" for="reaason">Reason</label>
<input id="reason" name="reason"  />
</fieldset>
</form>

JS（使用jquery）：

$(document).ready(function() {

    $('#reason').hide();
    $('#lblReason').hide();

    $('input[type=radio]').change(function(){
        if($('#rdoNo').is(':checked'))
        {
            $('#reason').show();
            $('#lblReason').show();
        }
        else
        {
            $('#reason').hide();
             $('#lblReason').hide();
        }

        ;});
});

Answer 3

http://jsfiddle.net/ZYqyC/

将标签和文本框包装在div

中

<div id=reasondiv>
            <label for="reaason">Reason</label>
            <input id="reason" name="reason"  />
 </div>

然后是jquery：

$("#reasondiv").hide();
$("input[name=choice]:radio").click(function(){

   if($(this).val()=='Yes')
      $("#reasondiv").show();
   else
       $("#reasondiv").hide();

});

如果checkbox选项为X，则Jquery验证require

3 个答案: