根据复选框值独立显示/隐藏多个div类

我已经看到类似于我的几个问题，但似乎无法找到解决方案。根据复选框值独立显示/隐藏多个div类

我正在用FullCalendar使用Google XML URL提供支持JavaScript的日历。我的目标是根据与日历上的事件相对应的复选框值来显示/隐藏日历上的事件。这些事件按类型分组（它们在单独的具有单独的XML URL的Google日历中，但呈现在网页上的相同日历显示中）并具有不同的div类名称。我总共有11个不同的类，需要根据复选框值独立于其他类来切换其可见性。

我正在学习JQuery/JavaScript的过程，因此大部分对我来说仍然是希腊语。我找到了适用于单个类的解决方案，但如果存在其他复选框，则依赖于所有其他复选框的值。这是我使用目前JS：

<script type="text/javascript"> 
function doInputs(obj){ 
var checkbox = $("input[type=checkbox]:checked"); 
var i =0, box; 
$('.className').fadeOut('fast'); 
    while(box = checkbox[i++]){ 
    if(!box.checked)continue; 
    $('.className').fadeIn('fast'); 
    break; 
    } 
} 
</script>

以及相应的加价：

<input type="checkbox" checked="checked" name="className" onclick="doInputs(this)"> Class Name Text

这工作得很好;然而，我不知道如何使它与多个div类工作。有什么建议么？

来源

2011-11-22 nnavaille

所以，我明白复选框的“名称”是相同的div的“类”，你想淡入/淡出？ – anson

请做一个JS小提琴然后我可以尝试和帮助你 - 我知道该怎么做 - 我只是没有时间为你做所有的代码。欢迎来到StackOverflow – ppumkin

我发现了一个不同的解决办法，效果要好得多，并使用现有的FullCalendar JS行动。我使用FullCalendar的removeEventSource和addEventSource操作来显示/隐藏每个正在切换的11个日历，而不是使用div类和它们的类名作为显示状态的决定性因素。

原来的JS是here。再多一点，我会更早地发现这一点。

感谢那些评论和回答。

来源

2011-11-26 05:26:08 nnavaille

您可以传递div的类名称以及JS函数，例如

doInputs(this,'classname')

，并根据该类别名称您可以切换该类

E.G

function doInputs(obj,cc){ 
...... 
$('.' + cc).fadeOut('fast'); 
...... 
}

来源

2011-11-23 18:10:04 samirprogrammer

根据复选框值独立显示/隐藏多个div类

回答

相关问题