XML checkbox

by Anov Siradj

HTML

<!DOCTYPE html>
<html>
<head>
<title>XML checkbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script>
    
$( document ).on( 'pageinit', function() {

    $('#update1').click(function(){

    $( '#log' ).html('');
    $( '#log' ).html('<li data-role="list-divider">Checkbox <code>checked</code> status: '+ navigator.userAgent+'</li>');
    
    $( '#fs1 input[type="checkbox"]' ).each( function( i ) {

    $( '#log' ).append( '<li data-theme="' + ( $( this ).is( ':checked' ) ? 'b' : 'a' ) + '">'
                + $( 'label[for="' + $( this ).attr( 'id' ) + '"]' ).text() + ": "
                + $( this ).is( ':checked' ) + "</li>" );
    });
    $( '#log' ).listview ( 'refresh' );    
    
    });

    $.get( "/MauriceG/UaVyV/show/light/", function( XMLdata ){

    //console.log(XMLdata);
    
    $( XMLdata ).find( "movie" ).each( function(){
    var $data = $( this ),
    
    cb = $( '<input />',  {
            type: "checkbox",
            name: "cb" + $data.attr( 'id' ),
            id: "cb" + $data.attr( 'id' ),
            checked: $data.find( 'stock' ).text() === "Y" ? true : false } ),
    
    lab = $( '<label/>', {
            text: $data.attr( 'title' ),
            for: "cb" + $data.attr( 'id' ) });

    $( "#fs1" ).append( cb ).append( lab );

  });
  
  $( '#fs1 input[type="checkbox"]' ).checkboxradio(); 
  $( '#results' ).listview ( 'refresh' );
 
  });    
  

});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
  <div data-role="header" data-theme="b">
    <h1>XML checkbox</h1>
  </div>

  <div data-role="content">

    <button id='update1'>Update Values</button>
      
    <fieldset data-role="controlgroup" id="fs1">
      <legend>Movies on...

CSS

#log { margin-top: 1.5em; }