显示隐藏内容取决于是否选中了复选框
我对jquery很新,所以我为自己迄今为止所想到的事情感到骄傲。 我要做的是显示/隐藏选项列表,具体取决于适当的复选框状态。 Eveything工作正常,但我无法弄清楚如何检查是否在加载时检查复选框我知道我应该能够使用is.checked
现在我有这个javascript
$('.wpbook_hidden').css({ 'display': 'none' }); $(':checkbox').change(function() { var option = 'wpbook_option_' + $(this).attr('id'); if ($('.' + option).css('display') == 'none') { $('.' + option).fadeIn(); } else { $('.' + option).fadeOut(); } });
根据复选框的状态,它会淡入和淡出一个类。 这是我的HTML
click to show text1 This is option one
This is another option one
click to show text1 This is option two
我遇到的两个问题是.wpbook_hidden
类的内容始终是隐藏的,如果在加载时选中了复选框,则应加载内容。
如果有人能够弄清楚如何检查负载盒子的状态,那么可以随心所欲地玩这个jfiddle http://jsfiddle.net/MH8e4/3/
你可以使用:checked
作为选择器。 像这样,
alert($(':checkbox:checked').attr('id'));
更新小提琴
或者如果你想检查特定复选框的状态,它将是这样的
alert($('#set_1')[0].checked);
更新小提琴
对于下面的评论,我已经编辑了你的代码,现在看起来像这样。
$('.wpbook_hidden').hide(); $(':checkbox').change(function() { changeCheck(this); }); $(':checkbox:checked').each(function(){ // on page load, get the checked checkbox. changeCheck(this); // apply function same as what is in .change() }); function changeCheck(x) { var option = 'wpbook_option_' + $(x).attr('id'); if ($('.' + option).is(':visible')) { // I'm not sure about my if here. $('.' + option).fadeOut(); // if necessary try exchanging the fadeOut() and fadeIn() } else { $('.' + option).fadeIn(); } }
#news fiddle
要检查复选框是否已选中,您可以使用以下代码:
$(':checkbox').change(function() { if ( $(this).checked == true ){ //your code here } });
试试这个:
$("input[type=checkbox]:checked").each(fun....