simple item clicklist

by stot

HTML

<!DOCTYPE html>
<html>
<head>

	<!-- 
	http://jsfiddle.net/3XvBW/3/
	 -->

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  
  
  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

</head>
<body>

<div data-role="page" id="page1">
    <div data-role="header"> 
         <h1>Items</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-icon="false" data-inset="false">
            <li id="li123">
                <div class="checkboxOverlay" onclick="toggleCheckItem( this);">
                    <div class="ui-icon ui-icon-plus"></div>
                </div> 
                <a href="#page2">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-bb.jpg" />
		        	<h3>Item</h3>
        			<p><img src="http://api.jquerymobile.com/resources/listview/images/gf.png" /> magic <strong>9</strong></p>
        			<p><img src="http://api.jquerymobile.com/resources/listview/images/de.png" /> melee <strong>3</strong></p>
                </a>
            </li>
            <li id="li12">
                <div class="checkboxOverlay" onclick="toggleCheckItem( this);">
                    <div class="ui-icon ui-icon-plus"></div>
                </div> 
                <a href="#page2">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-bb.jpg" />
		        	<h3>Item</h3>
        			<p><img src="http://api.jquerymobile.com/resources/listview/images/gf.png" /> magic <strong>9</strong></p>
        			<p><img...

CSS

.checkboxOverlay {
    position:absolute;
    right:10px;
    top:10px;
    width:18px;
    height:18px;
    padding:10px;    
    border:0px solid red;
}

JavaScript

$(document).ready(function() {
    // Handler for tap events on mobiles
    $('.checkBoxOverlay').on( "vclick", function() { toggleCheckItem(this);});
});

function toggleCheckItem( e) {

    // set defaults
    var lvs_theme_default = 'c';
    var lvs_theme_active = 'e';
    
    // get li
    var li = $( e).closest('li');

    // get changed theme
    var lvs_theme = ($(li).attr('data-theme') == lvs_theme_default) ? lvs_theme_active : lvs_theme_default;
    
    // check if already enough items are enabled
    if ( $('li[data-theme="e"]').length > 2 && lvs_theme == lvs_theme_active) {
        $( "#purchase" ).popup( "open" );
        return;
    }
    
    // generate target classes
    var lvs_current_class = $(li).attr('class');
    var lvs_removes = lvs_current_class.match(/ui-btn-up-\w+/gi).join(" ");
    lvs_removes += " ";
    lvs_removes += (lvs_current_class.match(/ui-btn-hover-\w+/gi) || []).join(" ");
    var lvs_adds = "ui-btn-up-" + lvs_theme;

    // change li classes													
    $(li).removeClass(lvs_removes)
        .addClass(lvs_adds)
        .attr('data-theme', lvs_theme);

    // change the icon
    if (lvs_theme == lvs_theme_active) {
        $('div',e).removeClass('ui-icon-plus').addClass('ui-icon-minus');
    } else {
        $('div', e).removeClass('ui-icon-minus').addClass('ui-icon-plus');
    }
}