Question

这是我的第一个javascripts，但这正是我想要做的事情：

如果禁用了javascript，则选择paypal单选按钮并隐藏更改为信用卡的选项。
如果启用了javascript，则启用信用卡选项默认，你也可以选择paypal。
如果在收音机上选择了信用卡选项，则相关字段显示。

这是我尝试使用我在线阅读的信息中的代码。任何人都可以帮我看看它为什么不起作用？

// 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');
}
});

Answer 1

尝试为radiobuttons设置相同的名称属性。另外，删除class="hidden" DOMElement的#card，因为您希望首先选择信用卡选项（查看您的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');

Live Demo

Answer 2

您可以这样解决：

<强> 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();

<强>演示

Try before buy

Answer 3

试试这个：

<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/

Jquery操作输入字段

3 个答案:

HTML

的JavaScript / jQuery的

Live Demo