javascript - Replace html checkbox with X -


i'm trying replace checkbox on form red x. basically, want the form functionality stay same don't want display box check rather red x click. i'm not sure how replace checkbox icon though.

you can't replace because browser-specific implementation , notice looks different in different browsers. however, little bit of effort can write own. minimalistic example create following html structure...

<div>     <span class="chk" unchecked></span>     <input type="checkbox" /> </div> 

hide checkbox , style span way want to...

.chk {     display:inline-block;     width:13px;     height:13px;     border-radius: 3px;     padding:2px;     border:1px #ccc solid;     cursor:pointer; } .chk[checked]{     background:url(your-checked_image.png); } .chk[unchecked]{     background:url(your_own_image.png); } input[type=checkbox] {     display:none; } 

and then, need intersect click event change background image, keep track of checked state , toggle checkbox. notice still need checkbox if hidden in case need submit state using form tag. of jquery makes pretty easy...

$(function(){     $('.chk').click(function(){         if($(this).attr('checked') == undefined)         {             $(this).attr('checked',"");             $(this).removeattr('unchecked');             $('input[type=checkbox]').prop('checked', true);         }         else         {             $(this).removeattr('checked');             $(this).attr('unchecked',"");             $('input[type=checkbox]').prop('checked', false);         }     }); }); 

i put js fiddler can play with.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -