jQuery - 选择单选按钮并填充文本字段时显示div

时间:2015-06-16 20:43:54

标签: javascript jquery html css radio-button

当选择单选按钮并输入文本字段时,我需要显示隐藏的div。现在,当文本输入文本字段时,我的脚本显示隐藏的div。有人可以帮我调整我的脚本,这样它还需要在显示div之前选择单选按钮吗?在显示div之前我需要满足两个条件。

<!--RADIO BUTTON-->
<input name="term" type="radio" id="promoPrice">
<strong>$XX.XX</strong>
<div class="promoPrice1" style="display: none;">
<img src="images/x.png" style="vertical-align: middle;"> <span style="padding-left: 5px; font-weight: bold; line-height: 18px; vertical-align: middle;">$XX.XX</span>
</div>

<!--TEXT INPUT BOX-->
<input type="text" placeholder="Promo Code" class="promo" style="width: 175px;">

<!--JQUERY SCRIPT-->
<script type="text/javascript">
//PROMO CODE
$(function () {
$(".promo").bind("change keyup input",function() { 
    var show_promo = true;
    $('.promo').each( function(i) {
        if ($(this).val().length > 0)  {
            show_promo = false;
        } 
    });
    if (show_promo){
            $(".promoPrice1").hide();
    } else {
            $(".promoPrice1").show();
    }
});
});
//END PROMO CODE
</script>

1 个答案:

答案 0 :(得分:0)

变化

if($(this).val().length > 0)

if(($(this).val().length > 0) && $("#promoPrice").is(':checked'))

并添加

$("#promoPrice").click(function(){
    if($(this).is(':checked') && $('.promo').val().length>0){
    $(".promoPrice1").show();
    }
});

工作小提琴 - http://jsfiddle.net/ccv84nc0/1/