CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Zahir
Alex Zahir

Reputation: 969

Make anchor tags behave like checkboxes and radio buttons

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.

Upvotes: 0

Views: 5425

Answers (4)

tomatentobi
tomatentobi

Reputation: 3157

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; }

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1075009

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:

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.

Upvotes: 3

DavidB
DavidB

Reputation: 2596

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>

Upvotes: 0

Jake Aitchison
Jake Aitchison

Reputation: 1099

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/

Upvotes: 0

Related Questions