javascript - Make anchor tags behave like checkboxes and radio buttons -

i have unordered list like:

  <ul class="list-one">     <li><a href="#">hip hop</a></li>     <li><a href="#">country</a></li>     <li><a href="#">pop</a></li>     <li class="selected"><a href="#">religious</a></li>   </ul> 

i want anchors behave checkboxes. have similar list , want checkboxes there behave radio buttons.

is there way using jquery? searched google couldnt find anything.

you can work jquerys parent() , siblings() methods.

check jsfiddle demo radios!

jquery radio:

$(".list-one a").click(function(){   $(this).parent().addclass("selected").siblings().removeclass("selected");  }); 

jquery checkboxes:

$(".list-one a").click(function(){   $(this).parent().toggleclass('selected');  }); 

if need radios form, can use label instead of a tag , hide radios css.

check jsfiddle demo radios!

html radios:

<ul class="list-one">   <li>     <input id="input-1" type="radio" name="list" value="hip hop" />     <label for="input-1">hip hop</label>   </li>   <li>     <input id="input-2" type="radio" name="list" value="country" />     <label for="input-2">country</label>   </li>   <li>     <input id="input-3" type="radio" name="list" value="pop" />     <label for="input-3">pop</label>   </li>   <li class="selected">     <input id="input-4" type="radio" name="list" value="pop" />     <label for="input-4">religious</label>   </li> </ul> 

don't forget change type attribute checkbox checkboxes.

jquery radios:

$(".list-one label").click(function(){   $(this).parent().addclass("selected").siblings().removeclass("selected");  }); 

jquery checkboxes:

$(".list-one label").click(function(){   $(this).parent().toggleclass('selected');  }); 

css:

.list-one label { cursor: pointer; } .list-one input { display: none; }