0

So i am trying to create a mobile website with jquery mobile. I have a fieldset with multiple checkboxes like this. The user has to check all of those checkboxes in order to proceed. That works fine so far.

<div>
    <fieldset id="checkBoxContainer" data-role="controlgroup" data-type="vertical">
        <input name="CheckBoxGroup" class="CheckBox" id="CheckBox_1" type="checkbox">
        <label for="CheckBox_1">The first Checkbox</label>
        <input name="CheckBoxGroup" class="CheckBox" id="CheckBox_2" type="checkbox">
        <label for="CheckBox_2">The secondCheckbox</label>
        <input name="CheckBoxGroup" class="CheckBox" id="CheckBox_3" type="checkbox">
        <label for="CheckBox_3">The third Checkbox</label>
    </fieldset>
</div>

Now i wanted to dynamically create those text checkboxes with something like that:

function createCheckBox(theClass, theId) {

    $('#checkBoxContainer').controlgroup("container").append('<label for='
        theId '><input type="checkbox" class='
        theClass ' name="clock-place" "id='
        theId ' />Checkbox</label>');

    $("#checkBoxContainer").enhanceWithin().controlgroup("refresh");

}

But somehow how i cant set the ID and the class based on the Parameter for the input and label element what am i doing wrong how can i do it?
The second question is then how would I check if those dynamically added checkboxes are checked I need the Id somehow dont i how do i solve this problem?
Currently i am checking them like that: 

function controlCheckBoxStatus() {
    $("input.CheckBox").on("change", function() {


        if ($("input#CheckBox_1").is(":checked") &&
            ($("input#CheckBox_2").is(":checked")) &&
            ($("input#CheckBox_3").is(":checked"))) {
            checkBoxStatus = true;
            alert("All checkboxes checked!");

        } else {
            checkBoxStatus = false;
        }
    })

}
guradio
  • 15,524
  • 4
  • 36
  • 57
TheWandererr
  • 514
  • 1
  • 8
  • 34
  • You need to change your string concatenation. For example: `' – Mike Scotty Aug 30 '16 at 08:08
  • change this `$("input.CheckBox").on("change", function() {` to `$(document).on("change", "input.CheckBox", function() {` delegate the event – guradio Aug 30 '16 at 08:08
  • thanks for solving the concatenation problem, and the document.on("change") is also nice thanks. – TheWandererr Aug 30 '16 at 08:37
  • okay i found the answer to my other question here on stackoverflow : http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480 – TheWandererr Aug 30 '16 at 08:57

0 Answers0