I have an 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 the anchors to behave like checkboxes. I have another similar list and I want the checkboxes there to behave like radio buttons.

Is there any way to do this using jquery? I searched google but couldnt really find anything.

I have an 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 the anchors to behave like checkboxes. I have another similar list and I want the checkboxes there to behave like radio buttons.

Is there any way to do this using jquery? I searched google but couldnt really find anything.

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 7, 2013 at 14:22 Paul D. Waite 99k5757 gold badges203203 silver badges271271 bronze badges asked Aug 7, 2013 at 14:17 Alex ZahirAlex Zahir 96977 gold badges2121 silver badges5050 bronze badges 10

• 1 Why not make checkboxes and radio button act like anchors? That's a lot easier. – Iron3eagle Commented Aug 7, 2013 at 14:18
• 4 Yes you can do that. But at least try something and show it here. Than we can guide you.# – putvande Commented Aug 7, 2013 at 14:19
• 1 What do you mean by "behave like checkboxes"? Do you want to toggle the colour (or otherwise visually indicate some sort of on/off state) when the links are clicked? – nnnnnn Commented Aug 7, 2013 at 14:20
• 3 Just out of curiousity, why can't you use checkboxes and radio buttons? I'm just trying to understand why you need to fake something when the browser provides perfectly fine tags for this... – Eric Commented Aug 7, 2013 at 14:21
• 1 @AlexZahir "behave like checkboxes" is very vague. Do you want a check mark to appear? Do you want to toggle something on the page? Do you still want to link to another page? If you don't know ask who ever wrote the design for clarification. – Iron3eagle Commented Aug 7, 2013 at 14:45

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 4

You can work with the jQuerys parent() and siblings() methods.

check this jsFiddle Demo for 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 you need the radios for a form, you can use label instead of the a tag and hide the radios with css.

check this jsFiddle Demo for 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 to change the type attribute to checkbox for 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; }

For checkboxes, simply:

$(".list-one > li > a").click(function() {
    $(this).closest('li').toggleClass('selected');
    return false;
});

Or using delegation:

$(".list-one").on("click", "> li > a", function() {
    $(this).closest('li').toggleClass('selected');
    return false;
});

For radio buttons, you add rather than toggling and remove the class from siblings:

$(".list-one > li > a").click(function() {
    $(this).closest('li').addClass('selected').siblings().removeClass('selected');
    return false;
});

Or using delegation:

$(".list-one").on("click", "> li > a", function() {
    $(this).closest('li').addClass('selected').siblings().removeClass('selected');
    return false;
});

More to explore:

• $ / jQuery
• on
• closest
• toggleClass
• siblings
• addClass
• removeClass

---

That said, using real checkboxes and radio buttons is frequently the better way to go, not least for support of mobile devices (tablets, phones, etc.). You can use label elements to make them easy to click, and style them thoroughly, but by making them real checkboxes / radio buttons, you give the user agent (browser) information to work with that you're losing by rolling your own.

checkbox's were designed to be used in that fashion and radio buttons in the latter, whey would you want to replace with anchors? if you want to theme your elements there are jQuery plugins that can replace the actual checkboxes and radio buttons with prettyfied versions see here http://stefangabos.ro/jquery/zebra-transform/

Change your code to:

<ul class="list-one">
    <li><input type="checkbox" name="music" value="HipHop">Hip hop</li>
    <li><input type="checkbox" name="music" value="Country">Country=</li>
    <li><input type="checkbox" name="music" value="Pop">Pop</li>
    <li><input type="checkbox" name="music" value="Religious">Religious</li>
  </ul>