2016-10-03 149 views
8

我試圖根據複選框選中此選項顯示的值,並取消如何顯示或基於複選框選擇

例如,如果顯示所有數學複選框選擇隱藏容器內div的,我想顯示所有針對數學選擇

類似地,如果顯示所有物理複選框被選中包面板,我想顯示所有這Physiscs選擇

包面板

我已經嘗試過這種方式

$(document).on('change', '.filtermaths', function() { 
$(".pack-panel").each(function() { 
    var visible = $(this).find('.mathscheckbox').prop('checked') 
    $(this).toggle(visible); 
    }); 
    }); 


$(document).on('change', '.filterphysics', function() { 
$(".pack-panel").each(function() { 
    var visible = $(this).find('.physicscheckbox').prop('checked') 
    $(this).toggle(visible); 
    }); 
    }); 

    $(document).on('change', '.filterchemistry', function() { 
$(".pack-panel").each(function() { 
    var visible = $(this).find('.chemistrycheckbox').prop('checked') 
    $(this).toggle(visible); 
    }); 
    }); 

但預期

這是不工作這是我的小提琴

http://jsfiddle.net/cod7ceho/135/

可否請你讓我知道如何解決這一問題

回答

7

你可以嘗試這樣的事情。

$(document).on("change", ".actions", function(event) { 
 
    if ($("input[name='includeAll']:checked").val() === "OR") { 
 
    if ($("input:checked", $(".actions")).length === 0) { 
 
     $(".pack-panel").addClass("visible").removeClass("hidden"); 
 
    } else { 
 
     $(".pack-panel").addClass("hidden"); 
 
    } 
 

 
    $("input:checked", $(".actions")).each(function() { 
 
     var $target = $(this); 
 
     var isChecked = $target.prop("checked"); 
 
     var value = $target.data("course-flag"); 
 

 
     if (isChecked) { 
 
     $("." + value + "-checkbox:checked").closest(".pack-panel").addClass("visible").removeClass("hidden"); 
 
     } 
 
    }); 
 
    } else { 
 

 
    var selectedCourses = []; 
 

 
    $("input:checked", $(".actions")).each(function() { 
 
     selectedCourses.push($(this).data("course-flag")); 
 
    }); 
 

 
    selectAll(selectedCourses); 
 
    } 
 

 

 
}); 
 

 
function selectAll(courses) { 
 

 
    $(".pack-panel").each(function() { 
 
    var $panel = $(this); 
 
    var allSelected = true; 
 
    courses.forEach(function(course) { 
 

 
     if ($panel.find("." + course + "-checkbox:checked").length === 0) { 
 
     allSelected = false; 
 
     } 
 
    }); 
 

 
    if (allSelected) { 
 
     $panel.addClass("visible").removeClass("hidden"); 
 
    } else { 
 
     $panel.removeClass("visible").addClass("hidden"); 
 
    } 
 
    }); 
 
}
.visible { 
 
    display: block; 
 
} 
 
.hidden { 
 
    display: none; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 

 
    <input type="radio" value="AND" name="includeAll" checked/>AND 
 
</label> 
 
<label> 
 
    <input type="radio" value="OR" name="includeAll" />OR 
 
</label> 
 
<div class="row"> 
 
    <div class="col-lg-9 actions"> 
 
    <label class="mt-checkbox mt-checkbox-outline"> 
 
     <input class="filtermaths" data-course-flag="maths" type="checkbox">Show All Maths<span></span> 
 
    </label> 
 
    <label class="mt-checkbox mt-checkbox-outline"> 
 
     <input class="filterphysics" type="checkbox" data-course-flag="physics">Show All Physics<span></span> 
 
    </label> 
 
    <label class="mt-checkbox mt-checkbox-outline"> 
 
     <input class="filterchemistry" type="checkbox" data-course-flag="chemistry">Show All Chemistry<span></span> 
 
    </label> 
 
    </div> 
 
    <hr> 
 

 

 
    <div class="sortable col-lg-12" id="pacstable"> 
 
    <div class="portlet portlet-sortable light bordered pack-panel"> 
 
     <div class="portlet-title"> 
 
     <div class="row"> 
 
      <div class="col-md-7"> 
 
      <div class="packdtsl"> 
 
       <div class="packimg"></div> 
 
       <ul> 
 
       <li> 
 
        <span class="title pac_inner">Student Name:</span> 
 
        <span> 
 
          <h1 class="studentname">Mark</h1> 
 
         </span> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
      <div class="packrow"> 
 

 
      </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
      <div class="packrow"> 
 
       <ul> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="physics-checkbox" value="physics" type="checkbox" checked="">Physics<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="chemistry-checkbox" value="chemistry" type="checkbox" checked="">Chemistry<span></span> 
 
        </label> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="portlet portlet-sortable light bordered pack-panel"> 
 
     <div class="portlet-title"> 
 
     <div class="row"> 
 
      <div class="col-md-7"> 
 
      <div class="packdtsl"> 
 
       <div class="packimg"></div> 
 
       <ul> 
 
       <li> 
 
        <span class="title pac_inner">Student Name:</span> 
 
        <span> 
 
          <h1 class="studentname">Micheal</h1> 
 
         </span> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
      <div class="packrow"> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
      <div class="packrow"> 
 
       <ul> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="physics-checkbox" value="physics" type="checkbox" checked="">Physics<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="chemistry-checkbox" value="chemistry" type="checkbox" unchecked="">Chemistry<span></span> 
 
        </label> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="portlet portlet-sortable light bordered pack-panel"> 
 
     <div class="portlet-title"> 
 
     <div class="row"> 
 
      <div class="col-md-7"> 
 
      <div class="packdtsl"> 
 
       <div class="packimg"></div> 
 
       <ul> 
 
       <li> 
 
        <span class="title pac_inner">Student Name:</span> 
 
        <span> 
 
          <h1 class="studentname">Roger</h1> 
 
         </span> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
      <div class="packrow"> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
      <div class="packrow"> 
 
       <ul> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="physics-checkbox" value="physics" type="checkbox" unchecked="">Physics<span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-checkbox mt-checkbox-outline"> 
 
        <input class="chemistry-checkbox" value="chemistry" type="checkbox" unchecked="">Chemistry<span></span> 
 
        </label> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我修改的標記位有從複選框選擇外觀UPS在頂部包板裏面的人。

修改了代碼以適應OR和AND條件。這應該可以解決你的問題。

+0

謝謝,但這不是例如工作的知道,如果你選擇顯示所有數學和顯示所有物理學,其數據顯示錯誤。 – Pawan

+0

當所有物理學和所有數學選擇時,它是否應該返回,如果它們都被選中或者選擇了數學和物理學中的任何一個,它是一個OR還是AND條件? – Sreekanth

+0

對於遲到的回覆感到抱歉,一切都只是AND條件 – Pawan

1
var fields = ['maths', 'physics', 'chemistry']; 
var visible = {}; 

$('.actions input').on('change', function(){ 
    var atLeastOne = false; 
    for(var field of fields){ 
     visible[field] = false; 
     if($('.filter' + field).prop('checked')){ 
      visible[field] = true; 
      atLeastOne = true; 
     } 
    } 

    if(!atLeastOne){ 
     $(".pack-panel").show(); 
    }else{ 
     $(".pack-panel").hide(); 
     for(var field of fields){ 
      if(!visible[field]){ continue; } 
      $(".pack-panel").each(function() { 
       if($(this).is(':visible')) { return; } 
       if($(this).find('.'+field+'checkbox').prop('checked')){ 
        $(this).show(); 
        return; 
       } 
      }); 
     } 
    } 
}); 
4

試試這個最短的代碼

$('.actions input').on('change', function() { 
    if ($('.actions input:checked').length <= 0) 
     $(".pack-panel").show(); 
    else { 
     $(".pack-panel").show(); 
     $('.actions input:checked').each(function() { 
      var cclass = $(this).attr('class').split('filter')[1] + "checkbox";      
      $('.' + cclass).each(function() {        
       if(!$(this).prop('checked')){ 
        $(this).parents('.pack-panel').hide(); 
       } 
      }); 
     }); 
    } 
}); 
+0

非常感謝, 請參閱此琴http://jsfiddle.net/cod7ceho/183/ 當我檢查顯示所有數學並顯示所有的物理,它也顯示第二行(在物理不被選擇的情況下) – Pawan

+0

它是一個AND條件。(不是OR) – Pawan