mardi 30 août 2016

Create a Dynamic Checkbox and check if it has been checked

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;
        }
    })

}




Aucun commentaire:

Enregistrer un commentaire