Insert a checkbox within a Jquery Javascript button

Asked

Viewed 38 times

1

I have a list with a mousedown within each <li></li> and I need to put a checkbox within that li tbm only that the checkbox can’t have the mousedown.

Is there any way to do it?

<li class="list-group-item" onmousedown="modalCartao(1)">
  <input style="float: right;" type="checkbox" id="checkbox">  
</li>

inserir a descrição da imagem aqui

javascript html jquery

1 answer

1


In that case, you need to treat the event mousedown input and cancel the event using stopPropagation()

$("li").mousedown(function() {
  // faz log de uma mensagem para demonstrar
  console.log( "li.mousedown()" );
});

$("li > input").mousedown(function(event) {
 // aqui cancela o evento. Se comentar essa linha vai ver que aparece o log do event do parent
  event.stopPropagation();
});
li {
  border: solid 1px #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
   <li class="list-group-item">
     <input type="checkbox" id="checkbox">  
   </li> 
 </ul>

  • And how would it be to pass a parameter inside the li mousedown? Because I’m there in fashionCartao(1), this 1 is an example of an id that I pull to open my modal from that reigstro

  • I also wanted to know a little bit about this li > input. It is possible to explain to me briefly how this works?

  • yes, this selector selects "within all elements LI all INPUT > nested below it", ie selects the elements <li><input>. If your inputs have a class, you can directly select from it

  • And another question like that parameter step to ->$("li"). mousedown(Function() { }

  • can pass the event, or the object itself with this $("li").mousedown(function(evento), but can do as in your example, with `onmousedown="modalCartao(1)"

  • Oh it worked, thank you very much, one last question, because (li > input) does not cancel the event of the checkbox (of selecting the checkbox) and only cancels the of the <li>?

Show 1 more comment

Browser other questions tagged javascript html jquery

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