JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="users" class="page">
    <div class="maintitle">Users</div>
    <div class="mytitle">
        <div class="row">
            <div class="data1">
                <div class="smallphoto"><img src="photos/small/default.jpg"/></div>
                <div class="label" style="font-size:14px;padding:5px;">admin</div>
            </div>
            <div class="data2">
                <div id="admin" class="checkboxcontainer">
                    <span class="canpost checkbox">
                        <input type="checkbox" value="1" class="checkbox" checked="checked"/>canpost<span style="display:none">1</span>
                    </span>
                    <span class="examable checkbox">
                        <input type="checkbox" value="1" class="checkbox" checked="checked"/>examable<span style="display:none">1</span>
                    </span>
                    <span class="ismaster checkbox">
                        <input type="checkbox" value="1" class="checkbox" checked="checked"/>ismaster<span style="display:none">1</span>
                    </span>
                    <span class="needsverification checkbox">
                        <input type="checkbox" value="0" class="checkbox"/>needsverification<span style="display:none">0</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div{border:thin solid #F00;}
#container1{width:auto;margin:10px;height:auto;}
#container2,#out{width:auto;margin:10px;height:auto;}
#container3{width:auto;margin:10px;height:25px;}

.b{color:#999;}

#container1 > .in{background-color:#F00;}

JavaScript

$('.checkbox').live('click', function() {
    var x = $('.checkboxcontainer').child('span').child('input');
    alert(x.length);
    //alert($(this).next('span').text());
});