时间戳

首页 > 解决方案 > 根据唯一选择或复选框的不同组合显示内容（例如超过 2 个）

jquery - 根据唯一选择或复选框的不同组合显示内容（例如超过 2 个）

问题描述

我需要根据复选框控件选择显示相应的图像，它在选择一个框并显示其各自内容的那一刻起作用，但是如果我从其中一些中删除选择它就不再起作用了。

   $(".checkboxmark").change(function(){    
      var val=''; 
     if($(this).is(':checked')) {

    $.each($('.checkboxmark:checked'), function(i) {
        val += '#' + $(this).attr('id');        
    });

    switch (val) {
        case '#nationals#usa_canada#latinoamerica':
            $(".div5").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#usa_canada':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#latinoamerica':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#usa_canada':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#latinoamerica':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
         case '#usa_canada#latinoamerica':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        default:
            $(".div4").fadeIn(400);
            break;
    }
 } 
});

例子：

如果我选中任何唯一的框或框的任何组合，则会正确显示单个选择或相应组合的结果，但如果我取消选中或删除任何选择，则会停止工作并且它不会显示假定的活动选择，或者未选择任何内容时的默认选择。

我在这个网址中有我的工作小提琴：https ://jsfiddle.net/alonsoct/9koqe4fr/

感谢您的帮助！

标签： jqueryhtmlcheckboxtoggle

解决方案

使用很多很多 div 来做你想做的事情是没有意义的。此外，如果您将来添加更多选项，则将难以管理。我已经删除了除一个 div 之外的所有 div 并将其默认为可见。此外，

  1. 我已将 jQuery 更改为设置为val等于所有要检查的元素的 id。（如果没有检查，则它将为空，这很好）。

  2. 接下来它设置val等于all_off如果没有检查。

  3. 然后，通过将检查的编号与总数进行比较，如果所有检查都被检查 ，则它设置val为等于。all_on

  4. 最后，它将 val 导出到innerHTMLdiv 的 div 中，将其显示给用户。

/*I need to show the corresponding image according to the checkbox controls selection, it works at the moment of selecting a box and showing its respective content, but if I remove the selection from some of them it doesn't work anymore.*/


/*Example
If I check any box, or any combination of boxes shows me correctly the result of the selection or combination, but if I uncheck any of the boxes stops working the switch script*/

/*If I select a unique option and the removal does not show me the default element */


$(".checkboxmark").change(function(){    
    var val=''; 
        
        $.each($('.checkboxmark:checked'), function(i,v) {
        console.log(v.id);
            val += v.id +" "; 
        });
        if($('.checkboxmark:checked').length==0){
        val = "all_off";
        }
        if($('.checkboxmark:checked').length==$('.checkboxmark').length){
        val = "all_on";
        }
        $('.imgMap')[0].innerText = val;
 }); 
 
div
{
    background:#ddd;
    width:100px;
    height:100px;
    margin:10px;
 
    
    
}
<form>
<label for="nationals">nationals</label>
 <input type="checkbox" id="nationals" class="checkboxmark">
 <br/>
<label for="usa_canada">usa and canada</label>
 <input type="checkbox" id="usa_canada" class="checkboxmark">
 <br/>
<label for="latinoamerica">latinoamerica</label>
 <input type="checkbox" id="latinoamerica" class="checkboxmark">
</form> 
     
<div class="imgMap"></div>

推荐阅读