How to make radio effect in div

Asked

Viewed 88 times

0

I need to do an equal effect of input radio but in div, because when clicking on the first div add a class, if clicking on another div also add a class but have to remove from the div that received the class the first time.

html jquery
  • 1

    It is not clear the question Eduardo, could I explain with some clearer example?

  • in radio input when you click on it, it leaves selected but if you click on another radio input it removes from what you clicked and adds to where you had a new click. Right? I need to do this in div. example: <div> a </div> <div> b </div> , if you click on the A add a class , if you click on the B add a class (but you have to remove from the A)

2 answers

1


Here’s a simple example using Jquery

$("div").on('click', function(){
  $('div').removeClass('selecionado');
  $(this).toggleClass('selecionado');
});
div{
  height:20px;
  width:20px;
  display:block;
  border: 1px solid black;
}

.selecionado{
  background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div></div>
  <div></div>
  <div></div>
  <div></div>

0

First you need to relate the Divs and for that I recommend a date attribute. So it fulfills its role and you don’t mix the control of the action with your class responsible for the format. The group also serves for you to apply the action on only a few Ivs and changing the value of the attribute you can apply several times on the same page.

In the example below I chose the attribute "data-group", but it could be date-sausage. I also chose the value "my-group", but it could be anything too. The important thing is you define a good name to make clear the functionality.

<div data-group="meu-grupo">Primeiro</div>
<div data-group="meu-grupo">Segundo</div>
<div data-group="meu-grupo">Terceiro</div>

Now that all Divs have a interface you can control the click with jQuery. Note from the jQuery selector that I am taking all Ivs that have the data-group attribute with the value equal to "my-group". So be careful when changing the name and value of the attribute.

$("div[data-group=meu-grupo]").on('click', function(){
   // Removemos a classe de todas as divs do grupo
   $("div[data-group=meu-grupo]").removeClass("minha-classe");

   // Agora adicionamos a classe somente no item clicado
   $(this).addClass("minha-classe");
})

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.