0

这是我的第一个 javascripts 之一，但这是我想要做的：

  • 如果 javascript 被禁用，则选择 paypal 单选按钮并隐藏更改为信用卡的选项。

  • 如果启用了 javascript，则默认情况下会启用信用卡选项，您还可以选择 paypal。

  • 如果在收音机上选择了信用卡选项，则会显示相关字段。

这是我从网上阅读的信息中尝试的代码。谁能帮我看看为什么它不起作用？

http://jsfiddle.net/spadez/PceBr/4/

// IF JAVASCRIPT ENABLED...

// select card option by default
$('input:radio[name="creditcard"]').prop("checked", true);
// unhide payment options
$('#paymentchoice').removeClass('hidden');
// unhide card options
$('input:radio[name="creditcard"]').change(
if ($(this).is(':checked') {
    $('#card').removeClass('hidden');
}
});
4

3 回答 3

1

尝试将相同的名称属性设置为您的radiobuttons. 另外，删除class="hidden"给定的#cardDOMElement，因为您希望首先选择信用卡选项（查看您的 JavaScript）：

HTML

<div id="paymentchoice">Creditcard
    <input type="radio" name="paymentProcessor" id="creditcard" value="creditcard">Paypal</input>
    <input type="radio" name="paymentProcessor" id="paypal" value="paypal" checked="checked" />
</div>
<div id="card" >
    <input type="text" name="cardname">
    <input type="text" name="cardnum">
    <input type="text" name="cardcode">
    <select name="month">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
    </select>
    <select name="year">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</div>
<input type="submit" value="Submit">

JavaScript/jQuery

// IF JAVASCRIPT ENABLED...

/*Add the change() function FIRST, since you set the creditcard as selected option just after that */

// unhide card options
$('input[name="paymentProcessor"]').change(function () {
    if ($('#creditcard').is(':checked')) $('#card').removeClass('hidden');
    else $('#card').addClass('hidden');
});

// select card option by default
$('#creditcard').prop("checked", true);

// unhide payment options
$('#paymentchoice').removeClass('hidden');

现场演示

于 2013-07-12T13:12:18.990 回答
1

你可以这样解决它：

HTML

我更改了收音机的名称以将它们分组：

Creditcard <input type="radio" name="payment_method" value="creditcard">
Paypal <input type="radio" name="payment_method" value="paypal" checked>

JavaScript

var options = $('#card');
var method = $('input[name=payment_method]');

method.change(function() {
    if ('creditcard' == $(this).val() ) {
        options.show();
    } else {
        options.hide();
    }
});

$('input[value=creditcard]').prop('checked', true);
options.show();

演示

先试后买

于 2013-07-12T13:12:41.860 回答
1

尝试这个：

<style type="text/css">
.hidden{
    display:none;
}
</style>


<script type="javascript">
    $('input[name=payment]').change(function() {
    if($(this).val() == "creditcard"){
        $('#card').show();
    }else{
         $('#card').hide();
    }
});
</script>


<noscript>
<style type="text/css">
    .creditcard {display:none;}
</style>  
</noscript>

<div id="paymentchoice">
    <span class="creditcard">Creditcard
    <input type="radio" name="payment" value="creditcard"></span>
        Paypal<input type="radio" name="payment" value="paypal" checked>
</div>

<div id="card" class="hidden">
    <input type="text" name="cardname">
    <input type="text" name="cardnum">
    <input type="text" name="cardcode">
    <select name="month">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
    </select>
    <select name="year">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</div>
<input type="submit" value="Submit">

或这个：

http://jsfiddle.net/sbml/PceBr/10/

于 2013-07-12T13:41:44.387 回答