选择单选按钮时隐藏输入

Question

<input type="radio" name="pay" value="banktransfer"> Bank Transfer <br/>
<input type="radio" name="pay" value="paypal"> PayPal <br/> <br/>

<p><label for="id_account_owner">Owner:</label> <input id="id_account_owner" maxlength="250" name="account_owner" type="text" /></p>
<p><label for="id_account_number">Number:</label> <input id="id_account_number" maxlength="50" name="account_number" type="text" /></p>

How to create if I select paypal in radio button then field account_number and account_owner will be hidden?

Answer 1

You can use .change events:

$("input[type='radio']").change(function() {
    //Check the value for "paypal", also verify that the radio is checked
    if (this.value == "paypal" && this.checked) {
        $("#account_number, #account_owner").hide();
    } else {
        //I figured you would want to unhide these if paypal isnt checked, here's the else
        $("#account_number, #account_owner").show();
    }
});

Answer 2

Like this?

$("#id_account_number, #id_account_owner").prev('label').andSelf().hide(); //hide them initially if you don't have anything checked by default.

$("input[name='pay']").change(function () {
   var elems = $("#id_account_number, #id_account_owner").prev('label').andSelf().show(); //Get the inputs and their labels
    if (this.value == "paypal")  //check for the value of the radio button selected
        elems.hide(); //hide them

});

Fiddle