Monaca Onsen UI Discord Chat Github Repo

How change checkbox's state programmatically ?



  • Hello,
    I spend all day to find solution ! none… So I deseperatly need help…

    I would like to change visual state of a checkbox with JS without reload the page.

    Explain:
    I have 4 ons-checkbox components in a page. When the user click to select or unselect a checkbox each click launches a function to check if at least 1 checkbox remains checked… if the user uncheck the last item an alert box is lauched and the function re done the state checked on the last item the user access

    All is good : the last item recover his state ‘checked’ but NO VISUAL CHANGE appears ! I have a ons-checkbox in ‘checked’ state but with an empty circle (not ticked blue!)

    So how could I make visulally the checkbox blue ticked ?

    Here is my function :

    if (bdd_used.length==1){
    AlertInfo2(“Choix des bases de données”, “Au moins une base de données doit être sélectionnée !<br>”);
    document.getElementById(‘bdd_’+bdd_cible).value=‘checked’; <---------- the ons-checkbox is set as ‘checked’ value but no visual change on page !
    return;
    }

    Thank you very much for community help

    David


  • administrators

    To change whether the checkbox is checked, you need to set the checked property, not value.

    Here’s an example:
    https://codepen.io/anon/pen/bQzBXg?&editable=true&editors=101#anon-login

    Does this solve your problem?



  • GREAT ! GREAT ! GREAT !

    Thank you very much emccorson ! All is solved.

    Best regards.

    David