CODEWITHSUNDEEP
jqueryhtmlcss
noob-programmer009
noob-programmer009

Reputation: 3

make circular checkbox using jquery

using xml reading of contents of a particular thing i am adding checkboxes and its description.But the problem is that i want visual of my checkbox like radiobutton but it should work like checkbox.I mean i can check and uncheck it.Moreover on space of tick(in checkboxes),it should be dot(may be of any color if possible).

$(xml).find("Layer[Name='"+layerName+"']").find("IndustryComponent").each(function()
            {
                var layerDesciption= $(this).attr('Name');
                if($(this).is(':empty'))
                {
                    $(".InsideLayerContainer").append("<input type='checkbox' name='' value='' disabled='true'><label>"+layerDesciption+"</label><br/>");   
                }
                else
                {
                    $(".InsideLayerContainer").append("<input type='checkbox' name='' value=''><label>"+layerDesciption+"</label><br/>");
                }
            });

Upvotes: 0

Views: 1431

Answers (3)

yeyene
yeyene

Reputation: 7380

UPDATE

Check this DEMO http://jsfiddle.net/yeyene/Xqr4n/2/

HTML

<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 1<br />
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 2<br />
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 3<br />

JQUERY

$('input[type=checkbox]').each(function(){
    $(this).wrap('<span class="circle">');
});

$('.circle').on("click", function(){
    if($(this).css("background-color") == 'rgb(223, 223, 223)') { 
        $(this).find('.myCheck').prop('checked', true);
        $(this).css({'background-color':'rgb(0, 64, 212)'});
    }
    else {
        $(this).find('.myCheck').prop('checked', false);
        $(this).css({'background-color':'rgb(223, 223, 223)'});
    }
});

Upvotes: 1

adeneo
adeneo

Reputation: 318312

I wouldn't really recommend it, but you can always make radio buttons work like checkboxes, if that's what you're really after ?

$('input[type="radio"]').on('click', function() {
    this.checked = !$(this).data('checked')
    $(this).data('checked', !$(this).data('checked'));
});

FIDDLE

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

You need to use a image overlay for that.

Create two images one for unchecked view and one for checked view then based on the click value update a hidden checkbox and change the visible image also

Upvotes: 0

Related Questions