jQuery顯示在廣播電臺選擇與自動檢查收音機選項

Question

我正在使用jQuery顯示/隱藏廣播選擇div。這工作正常，但我不想延長它，所以默認情況下在頁面加載時選擇特定的廣播。

這裏的HTML

<input type="radio" id="Payment1">Payment1 
<input type="radio" id="Payment2">Payment2 

<div id="PaymentContainer1" style="display:none;">Payment 1 container</div> 
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div> 

jQuery的

$(document).change(function() { 
    if ($('#Payment1').prop('checked')) { 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').prop('checked')) { 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
}); 

這裏的小提琴http://jsfiddle.net/teva/yauCs/1/

我嘗試添加

$("#Payment1").prop("checked", true); 

，但它不工作。

感謝

編輯 什麼辦法，使在特定的div領域不只是隱瞞，但被禁用？我爲所有div使用一種形式，當我用jQuery隱藏它們時，表單不會發布，因爲字段是空的。所以，隱藏div並禁用輸入。這可能與jQuery？ TNX

Answer 1

哥們，你爲什麼要使用的文檔.change情況下，可能當你給出錯誤頁面中的其他更改。這樣

$(document).ready(function() { 

    $('input[type=radio]').change(function(){ 


    if ($('#Payment1').is(':checked')) { 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').is(':checked')) { 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
     }); 
}); 
$("#Payment1").prop("checked", true).change(); 

FIDDLE DEMO

你有一些其他的問題，在你的情況下，兩個無線電入門選擇

更好的利用，最好這不是辦法。

$(document).ready(function() { 
    $('input[type=radio]').change(function(){ 

    if ($('#Payment1').is(':checked')) { 

     $('.containner').hide(); 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').is(':checked')) { 

     $('.containner').hide(); 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
     }); 
}); 
$("#Payment1").prop("checked", true).change(); 

Perfect Radio Demo

Answer 2

添加name="payment"兩個radio所以他們將作爲小組，並呼籲click後change處理

HTML

<input type="radio" name="payment" id="Payment1">Payment1 
<input type="radio" name="payment" id="Payment2">Payment2 
<div id="PaymentContainer1" style="display:none;">Payment 1 container</div> 
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div> 

JS

$(document).change(function() { 
    if ($('#Payment1').prop('checked')) { 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').prop('checked')) { 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
}); 
$("#Payment1").click(); 

jsFiddle

Answer 3

嘗試以下操作：

$("input[type=radio]").change(function() { 

    if ($('#Payment1').prop('checked')) { 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').prop('checked')) { 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
}); 

$("#Payment2").prop("checked", true).trigger("change"); 

這裏是鏈接：http://jsfiddle.net/yauCs/5/

Answer 4

避免使用$(document).change()，你會聽在DOM每個元素的事件，on()允許元素動態添加和仍然工作。

$(document).on('change','input',function() { 

    if ($('#Payment1').prop('checked')) { 
     $('#PaymentContainer1').show(); 
    } else { 
     $('#PaymentContainer1').hide(); 
    } 

    if ($('#Payment2').prop('checked')) { 
     $('#PaymentContainer2').show(); 
    } else { 
     $('#PaymentContainer2').hide(); 
    } 
}); 

$("#Payment1").prop("checked", true); 

還設置電臺的名稱，同樣的事情，以確保只有一個選擇

fiddle

Answer 5

在此代碼非常少的錯誤，試試這個，我希望這將工作prefectly $（文件）。就緒（函數（）{ $（ 「＃Payment1」）。ATTR（ 「checked」，true）;

if ($('#Payment1').prop('checked')) { 
    $('#PaymentContainer1').show(); 
} else { 
    $('#PaymentContainer1').hide(); 
} 

if ($('#Payment2').prop('checked')) { 
    $('#PaymentContainer2').show(); 
} else { 
    $('#PaymentContainer2').hide(); 
} 

}）;