在javascript和jquery中验证字段

Question

我有四个单选按钮。 如果选择最后一个单选按钮，则会出现一个文本框。 我通过jQuery处理了这种情况。 现在，我想以一种方式进行验证，如果用户得到了这个文本框，则意味着如果用户选中了最后一个单选按钮，则他应该提供一些文本。一些文字。 代码如下：

    <input type="radio" name="bus_plan" id="smallBtn" value="1" />1
     <input type="radio" name="bus_plan" id="smallBtn" value="2" />2
     <input type="radio" name="bus_plan" id="smallBtn" value="3" />3
     <input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
      <span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
    <div class="reg-line" id="pr_code_id" style="display:none">
       <div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
       <input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
       <br />
       <div>
            <div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>    
       </div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){     
    $("input:radio[name=bus_plan]").click(function(){  
        var values = $(this).val();
        if(values == 'Promotional'){
            $('#pr_code_id').show();
        }else{
            $('#pr_code_id').hide();    
        }
    }); 
}); 
</script>

在js中，如果我警告document.getElementById('bus_prcode').value则始终显示促销代码，仅用于最后一个单选按钮值。

Answer 1

您的代码有些混乱，这是此问题的根源。 请记住，每个ID一个元素。

您可能还会发现查看jQuery .is（）很有帮助，例如：

$('input[value="Promotional"]').is(':checked')

注意，我不建议您使用上面的标识符。

同样值得一提的是，您的代码对我使用Chrome的效果很好。 在此处查看示例（已为您扩展）： http : //jsbin.com/ofujal/3/

Answer 2

您不应具有具有相同ID（您的单选按钮）的元素。 另外，您通过运行document.getElementById('bus_prcode')而不是单选按钮来获取文本框。 您应该为最后一个单选按钮提供唯一的ID，例如btnPromotional，然后将click绑定到它：

$("#btnPromotional").click(...)