Monaca Onsen UI Discord Chat Github Repo

Double markup for checkboxs



  • Hi,

    I got 2 checkboxes, but when I do a getElementByName everything is shown duplicated in the dom. Is it its normal behaviour of the frame or am i missing something?

    Thanks

    <ons-page>
    <ons-list>
    <ons-list-item tappable id=‘perro’>
    <label class=“left”>
    <ons-checkbox input-id=“check-1” name=‘culo’></ons-checkbox>
    </label>
    <label for=“check-1” class=“center”>
    Apple
    </label>
    </ons-list-item>
    <ons-list-item tappable>
    <label class=“left”>
    <ons-checkbox input-id=“check-2” name=‘culo’></ons-checkbox>
    </label>
    <label for=“check-2” class=“center”>
    Banana
    </label>
    </ons-list-item>
    </ons-list>
    </ons-page>

    DOM:
    document.getElementsByName(‘culo’):

    NodeList(4)
    0: ons-checkbox.checkbox
    1: input#check-1.checkbox__input
    2: ons-checkbox.checkbox
    3: input#check-2.checkbox__input
    length: 4



  • It’s normal, because you will have one ons-checkbox with input type checkbox inside, so, what you can do is :

    document.querySelectorAll('input[type="checkbox"][name="culo"]')
    // get inputs type checkbox with attribute **name** values equals **culo**
    

    or just

    document.querySelectorAll('input[name="culo"]')
    // get inputs with attribute **name** values equals **culo**