How to use a svg (or div) to click and select the corresponding checkbox

Asked

Viewed 155 times

1

I have a form that is a recipe search filter. In this filter I have a checkbox group for the category:

<form method="get" action="/busca">
  <h4>Categoria</h4>
  <input type="checkbox" name="categoria[]" value="entrada"> Entrada
  <input type="checkbox" name="categoria[]" value="principal"> Principal
  <button type="submit">Buscar Receitas</button>
</form>

I wanted instead of appearing the checkbox, appeared an image (svg) to click, and when clicking on the image it marks the corresponding checkbox. I’m using the fontawesome library. Then the DIV that wanted it to be clickable, would be like this:

<div class="categoria" id="entrada">
  <i class="fas fa-apple"></i><br/>
  Entrada
</div>
<div class="categoria" id="principal">
  <i class="fas fa-utensils"></i><br/>
  Principal
</div>

Then by clicking on the Ivs, it selects the corresponding checkbox.

And one more item, when you click on the div, it changes the css class to be red for example. You could add the class ". clicked" and clicking again removes that class.

php javascript form checkbox

1 answer

2


There is a "half way" to do, I will use some concepts that @hugocsl used.

Each <div> will have to have his id and onclick to call the function, which will be sending a parameter, which is the id. With the standardization of id of <button>, always starting with btn-, just concatenate the id sent with the btn and trigger the marking of the checkbox and insert a new style:

function trocar(id){
   $('#btn-' + id).trigger('click');
   $("#" + id + " i").closest( ".categoria" ).toggleClass("clicado")
}
.clicado{
  color: #ff0000;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form method="get" action="/busca">
  <h4>Categoria</h4>
  <input type="checkbox" name="categoria[]" value="entrada" id="btn-entrada"> Entrada
  <input type="checkbox" name="categoria[]" value="principal" id="btn-principal"> Principal
  <input type="checkbox" name="categoria[]" value="sobremesa" id="btn-sobremesa"> Sobremesa
  <button type="submit">Buscar Receitas</button>
</form>
<div class="categoria" id="entrada" onclick="trocar(this.id)">
  <i class="fab fa-apple fa-2x"></i><br/>
  Entrada
</div>

<div class="categoria" id="principal" onclick="trocar(this.id)">
  <i class="fas fa-utensils fa-2x"></i><br/>
  Principal
</div>

<div class="categoria" id="sobremesa" onclick="trocar(this.id)">
  <i class="fas fa-cookie fa-2x"></i><br/>
  Sobremesa
</div>
</body>
</html>

  • Cool, thanks. Is there any way to make more "dynamic"? Is that actually going to be various categories, input, Princpal, desserts, soups, etc., then I believe there is some way to make it more dynamic ne? Quarrel!

  • this dynamic, it would be to have more options of choice, to leave in a more visible way?

  • would be to simplify the code, for example, if it has 10 categories, I have to create 10 functions right? Isn’t there like I do a "generic" function that works for everyone? (I don’t know if I’ve understood my doubt)

  • I changed my answer using the form @hugocsl explained.

  • show, worked, just had to make a change, here " $("#" + id + " i"). toggleClass("clicked")" was applying css only to the icon, I changed it to $("#" + id + " i"). toggleClass("clicked") "$("#" + id + " i"). Closest( ".category" ).toggleClass("clicked")", I changed the answer

Browser other questions tagged php javascript form checkbox

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