Checkbox - Add / Check / Change text

jQuery Mobile

by Omar X

HTML

<p>Demo 1 - Change text</p>
<input id="ContentPlaceHolder1_chkbox2" type="checkbox" name="ctl00$ContentPlaceHolder1$chkbox2">
<label for="ContentPlaceHolder1_chkbox2">YES</label> <a href=# id=change data-role=button data-theme=e>Change text</a>

<hr/>
<p>Demo 2 - Add new checkbox dynamically</p> <a href=# id=add data-role=button data-theme=a>Add new Radio</a>

<hr/>
    <p>Demo 3 - Tick checkboxes dynamically</p> <a href=# id=check data-role=button data-theme=b>Check / Uncheck ALL</a>

JavaScript

// Change text
$('#change').on('click', function () {
    $('label[for="ContentPlaceHolder1_chkbox2"]').find('span.ui-btn-text').text('Changed!');
});

// Add new Radio button
$('#add').on('click', function () {
    $(this).before('<label for=new><input id=new type=checkbox name=new/>New</label>');
    $('input[type=checkbox]').checkboxradio().trigger('create');
});

// Dynamically 'Check' Radio buttons
$('#check').on('click', function () {
    $('input[type=checkbox]').each(function () {
        if ($(this).is(':checked')) {
            $(this).prop('checked', false).checkboxradio('refresh');
        } else {
            $(this).prop('checked', true).checkboxradio('refresh');
        }
    });
});