Das Ankreuzen von Kontrollkästchen in Spalten funktioniert mit "display: none"

Question

Wenn in meiner Benutzeroberfläche sowohl eine Regions- als auch ein Land-Ankreuzfeld ausgewählt ist, können Sie auf der rechten Seite sowohl die Region als auch ihre Länder sehen. Wenn nur das Markierungsfeld "Land" ausgewählt ist, werden die relevanten Länder in ein Feld "Nicht gruppierte Länder" eingefügt. Siehe fiedle: http://jsfiddle.net/m92hfs0b/

Ich versuche, die Länder zu einem Maximum von 3 Spalten anzuzeigen, ob sie unter ihrer Region angezeigt werden, oder ob in der Gruppe "ungruppierte Länder" angezeigt. Die Länderbestellung muss von links nach rechts erfolgen. Ich habe versucht, Ratschläge aus den vielen Beiträgen hier zu verwenden, einschließlich Inline-Block, CSS-Spalten usw., aber jeder scheint zu verhindern, dass "display: none" funktioniert, während "visibility: hidden" auch nichts löst. Jede Hilfe wirklich geschätzt.

// This opens up each of the regional sections, and at the end of the function it resorts the data for the 'Ungrouped countries' section. 
 

 
$(function() { 
 
    $('input[type="checkbox"]').click(function() { 
 
    if ($(this).attr("value") == "RegionEurope") { 
 
     $(".TextRegionEuroClass, .ContainerEuroClass").slideToggle(0) 
 

 
     var targetBox = $(this).prop("checked") ? '.ContainerEuroClass' : '.CountryRHWrapperClass' 
 
     $('.myEuropeCountries').appendTo($(targetBox)) 
 
    } 
 

 
    if ($(this).attr("value") == "RegionNAM") { 
 
     $(".TextRegionNAMClass, .ContainerNAMClass").slideToggle(0) 
 
     var targetBox = $(this).prop("checked") ? '.ContainerNAMClass' : '.CountryRHWrapperClass' 
 
     $('.myNAMCountries').appendTo($(targetBox)) 
 
    } 
 
    }); 
 
}); 
 

 
function sortByText(a, b) { 
 
    return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1; 
 
} 
 

 
// Pre-sort all the countries under mywrapper div (still keeping them hidden) 
 
var li = $(".CountryRHWrapperClass").children("label").detach().sort(sortByText) 
 
$(".CountryRHWrapperClass").append(li) 
 

 
// On-click handler will just toggle display, countries already sorted 
 
$('input[type="checkbox"]').click(function() { 
 
    $('.my' + $(this).attr("id")).slideToggle(0) 
 
})

.TopHeader { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
    font-size: 20px; 
 
} 
 

 
.LHContainerClass { 
 
    float: left; 
 
    height: 200px; 
 
    width: 300px; 
 
    font-family: Arial font-size: 12px; 
 
    border: 1px solid blue; 
 
} 
 

 
.RHContainerClass { 
 
    margin-left: 305px; 
 
    height: 200px; 
 
    font-family: "Verdana", Arial, serif; 
 
    font-size: 11px; 
 
    margin-right: 10px; 
 
    border: 1px solid pink; 
 
} 
 

 
.FourShapeRectangleClass { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 1px; 
 
    border: 1px solid black; 
 
    float: left; 
 
    white-space: wrap; 
 
} 
 

 

 
/* -------------------------------------------------- */ 
 

 
#DivForLHRegionsHeaderID { 
 
    height: 30px; 
 
    white-space: wrap; 
 
    border: 1px solid green; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 

 
#DivForLHCountriesHeaderID { 
 
    height: 30px; 
 
    white-space: wrap; 
 
    border: 1px solid green; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 

 
#DivForLHRegionLabelsID { 
 
    border: 1px solid green; 
 
    line-height: 160%; 
 
} 
 

 

 
/* ---------------------------------------------------------- */ 
 

 
.CountryRHWrapperClass { 
 
    margin-top: 30px; 
 
    border: 1px solid brown; 
 
} 
 

 
.HeaderUngroupedCountriesClass { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
} 
 

 

 
/* ---------------------------------------------------------- */ 
 

 
.ContainerEuroClass { 
 
    display: none; 
 
    border: 1px solid blue; 
 
} 
 

 
.TextRegionEuroClass { 
 
    display: none; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    padding: 2px 0px 6px 3px; 
 
    background: yellow; 
 
} 
 

 
.myEuropeCountries { 
 
    display: none; 
 
    width: 150px; 
 
} 
 

 

 
/* ---------------------------------------------- */ 
 

 
.ContainerNAMClass { 
 
    display: none; 
 
    border: 1px solid blue; 
 
} 
 

 
.TextRegionNAMClass { 
 
    display: none; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    padding: 2px 0px 6px 3px; 
 
    background: yellow; 
 
} 
 

 
.myNAMCountries { 
 
    display: none; 
 
    width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="TopHeader"> 
 
    <label>Region and Country Selector</label> 
 
</div> 
 
<div id="LHContainerID" Class="LHContainerClass"> 
 
    <div id="DivForLHRegionsHeaderID" class="FourShapeRectangleClass"> 
 
    <label>Region</label> 
 
    </div> 
 
    <div id="DivForLHCountriesHeaderID" class="FourShapeRectangleClass"> 
 
    <label>Countries</label> 
 
    </div> 
 
    <div style='clear:both'></div> 
 
    <div id="DivForLHRegionsCheckboxesID" class="FourShapeRectangleClass"> 
 
    <label><input type="checkbox" value="RegionEurope" />Region EU</label> 
 
    <label><input type="checkbox" value="RegionNAM" />RegionNA</label> 
 
    </div> 
 
    <div id="DivForLHCountriesCheckboxesID" class="FourShapeRectangleClass"> 
 
    <label><input type="checkbox" id="EuropeCountries" />Country EU</label> 
 
    <label><input type="checkbox" id="NAMCountries" />Country NA</label> 
 
    </div> 
 
</div> 
 
<div id="RHContainerID" class="RHContainerClass"> 
 
    <div class="ContainerEuroClass"> 
 
    <div class="TextRegionEuroClass">Europe</div> 
 
    </div> 
 
    <div class="ContainerNAMClass"> 
 
    <div class="TextRegionNAMClass">North America</div> 
 
    </div> 
 
    <div class="CountryRHWrapperClass"> 
 
    <div class="HeaderUngroupedCountriesClass">Ungrouped countries</div> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="France" />France</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="Switzerland" />Switzerland</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" value="Poland" />Poland</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Cuba" />Cuba</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Puerto Rico" />Puerto Rico</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Panama" />Panama</label> 
 
    <label class="myNAMCountries"><input type="checkbox" value="Grenada" />Grenada</label> 
 
    </div> 
 
</div>

Answer 1

diese beiden Arten verwenden

.myEuropeCountries:nth-child(3n):after { 
     content: '\A'; 
     white-space:pre; 
    } 

    .myNAMCountries:nth-child(3n):after { 
     content: '\A'; 
     white-space:pre; 
    }