jQuery - How can I toggle a custom checkbox with only one checkbox active at a time? -

i have created list of custom checkboxes. @ moment can select 1 checkbox @ time great; want toggle 'active' checkbox.

any appreciated, i've been trying fix on hour :)

here's code:

html:

<ul>     <li>         <a><i class="fa fa-square-o"></i> option 1</a>     </li>     <li>         <a><i class="fa fa-square-o"></i> option 2</a>     </li>     <li>         <a><i class="fa fa-square-o"></i> option 3</a>     </li> </ul> 

css:

// using borders represent checked/unchecked box demonstration  .active {     color: red; }  // non-checked box .fa-square-o {     border-style: solid;     border-width: 0px; } // checked-box .fa-check-square-o {     border-style: solid;     border-width: 1px; } 

jquery:

$('li a').bind('click', function() {     $('li a').not(this).removeclass("active");     $('li i').not(this).removeclass("fa-check-square-o").addclass("fa-square-o");     $(this).toggleclass('active');     $(this).children("i").toggleclass("fa-square-o fa-check-square-o"); }); 

the following not selecting want to:

$('li i').not(this) 

it gets <i> elements, not remove 1 inside clicked <a> element because this clicked <a> element, not <i> element inside clicked <a> element.

instead use:

$('li a').bind('click', function () {     $('li a').not(this).removeclass("active").children("i").removeclass("fa-check-square-o").addclass("fa-square-o");     $(this).toggleclass('active').children("i").toggleclass("fa-square-o fa-check-square-o"); }); 

also, hope aren't using // comments in css, , added them in question.

jsfiddle