Here is the style I am aiming for: http://jsfiddle.net/f07t3qkn/
The issue I am facing is that my current checkboxes all have the same id, which is 'level'. There is a script below that relies on this specific id to execute certain tasks, so changing the ids to be unique is not an option.
However, in the desired checkbox style, each checkbox should have a unique id. This poses a problem as it hinders the functionality of the script when trying to achieve the desired styling.
So, my question is how can I modify the script to accommodate unique ids for the checkboxes for styling purposes while still performing the necessary functions?
Alternatively, is there a way for the script to identify checkboxes based on ids starting with the word 'level', such as 'level_1', 'level_2', etc., rather than relying on a fixed id like 'level'? I have tried various approaches without success and any specific code examples would be greatly appreciated. Thank you in advance.
Below is the HTML code for the current checkboxes:
<ul class="box small-block-grid-1 medium-block-grid-2 large-block-grid-2">
<li><input type="checkbox" name="level[Primary]" id="level" class="level" value="1"><label>Primary</label></li>
<li><input type="checkbox" name="level[Upper Secondary]" id="level" class="level" value="3"><label>Upper Secondary</label></li>
<li><input type="checkbox" name="level[University]" id="level" class="level" value="5"><label>University</label></li>
<li><input type="checkbox" name="level[Lower Secondary]" id="level" class="level" value="2"><label>Lower Secondary</label></li>
<li><input type="checkbox" name="level[Pre University]" id="level" class="level" value="4"><label>Pre University</label></li>
<li><input type="checkbox" name="level[Other]" id="level" class="level" value="6"><label>Other</label></li>
</ul>
Script utilizing the id to perform other tasks:
<script>
$("#slider1").change(function() {
var value = $(this).val();
sendtobox(value, $("input[type=checkbox]#level").val());
});
$("input[type=checkbox]#level").change(function() {
var selectedval = $(this).val();
if($(this).is(":checked")) {
var selectedtext = $(this).next().text();
sendtobox(selectedval, $("#slider1").val());
}
else {
$("th."+selectedval).remove(); // controls removing from boxA
}
});
</script>