vendredi 11 novembre 2016

Strange alphabetical sorting of checkbox lists

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