0

我有四个单选按钮。如果我选择最后一个单选按钮，则会出现一个文本框。我用 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那么它总是显示促销代码，这仅适用于最后一个单选按钮值。

4

2 回答 2

1

你的代码有点乱，这是这个问题的根源。请记住，每个 ID 一个元素。

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

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

nb我不建议上述内容，您应该首先以适当的方式使用标识符。

还值得注意的是，您的代码在我使用 Chrome 时运行良好。在此处查看示例（我已为您扩展）：http: //jsbin.com/ofujal/3/

于 2012-09-07T18:15:01.967 回答
0

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

$("#btnPromotional").click(...)
于 2012-09-07T18:08:00.817 回答