Checkbox Example

by adam123

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div id="test"></div>
<form id="shapePosition">
    <fieldset data-role="controlgroup">
        <input type="checkbox" name="shape1" id="square">
        <label for="shape1">square</label>
        <input type="checkbox" name="shape2" id="circle">
        <label for="shape2">circle</label>
    </fieldset>
    </form>

CSS

#test {
    width:320px;
    height:320px;
}

JavaScript

var p = Raphael("test");

var square = p.rect(100, 100, 60, 60);
square.attr('fill', 'orange');
square.hide();

var circle = p.circle(250, 250, 60);
circle.attr('fill', 'yellow');
circle.show();


$("#shapePosition input[type=checkbox]").on('click', function () {
    var $this = $(this);
    var shapeId = $(this).attr('id');
    if ($this.is(':checked')) {
        alert(shapeId);
        square.show(); //This works
        shapeId.show(); //This does not work(Error type: is not a function)
    } else {
        shapeId.hide();
    }
});