I have 4 checkboxes, each representing a region. Clicking any one of them shows 3 countries relevant to that region. Clicking combinations of the regional checkboxes shows all the relevant countries in-line, but I want the list of country checkboxes to always be displayed in alphabetical order.
Strangely my jquery seemed to work for 3 regional checkboxes, but doesn't seem to work for 4. I just can't see what dumb mistake I'm making and am starting to suspect something more sinister. Here's my fiddle: http://ift.tt/2eZEXKj
Thanks for any help.
label>
<input type="checkbox" name="colorCheckbox" id="Europe" />Europe</label>
<label>
<input type="checkbox" name="colorCheckbox" id="Africa" />Africa</label>
<label>
<input type="checkbox" name="colorCheckbox" id="Asia" />Asia</label>
<div class="mywrapper">
<label class="myEurope">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEurope">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEurope">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myAfrica">
<input type="checkbox" value="Nigeria" />Nigeria</label>
<label class="myAfrica">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfrica">
<input type="checkbox" value="Kenya" />Kenya</label>
<label class="myAsia">
<input type="checkbox" value="Thailand" />Thailand</label>
<label class="myAsia">
<input type="checkbox" value="China" />China</label>
<label class="myAsia">
<input type="checkbox" value="Japan" />Japan</label>
</div>
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".mywrapper").children("label").detach().sort(sortByText)
$(".mywrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.mywrapper {
border: 1px solid blue;
height: 200px;
width: 300px;
border: 1px solid blue;
}
.myEurope {
display: none;
}
.myAfrica {
display: none;
}
.myAsia {
display: none;
}
Aucun commentaire:
Enregistrer un commentaire