When marking checkbox, leave visible link

Asked

Viewed 649 times

6

In my content management system, there is a checkbox in every item on the list, whether to edit, delete, view.. It turns out that this button appears all the time, and in case the user does not check anything, it is virtually useless.

I would like that, when some checkbox has been checked, the button appears, and if there is no checkbox, it disappears. Ah, if possible, a simple fadein and fadeOut effect.

HTML of checkboxes 

<input type="checkbox" id="checkbox" name="deletar[]" value="<?php echo $row['id']; ?> " />

HTML of the button that should appear after:

<input type="submit" class="excluir-varios" value="Excluir selecionados" onClick="return confirm('Deseja realmente deletar os artigos selecionados?')">
javascript jquery

1 answer

8


Just a little CSS:

.checkshow input[type="submit"] { opacity:0;transition:.5s;pointer-events:none }
.checkshow input:checked ~ input[type="submit"] { opacity:1;pointer-events:auto }
.checkshow input[type="checkbox"] { display:block /*só pra estética do demo */}
<div class="checkshow">
  <input type="checkbox" id="checkbox" name="deletar[]" value="1" />   
  <input type="checkbox" id="checkbox" name="deletar[]" value="2" />   
  <input type="checkbox" id="checkbox" name="deletar[]" value="3" />   
  <input type="submit" class="excluir-varios" value="Excluir selecionados" onClick="return confirm('Deseja realmente deletar os artigos selecionados?')">
</div>

Points of interest:

.checkshow input[type="submit"] { opacity:0;transition:.5s;pointer-events:none }

  • Here we define opacity 0 for the button to be hidden. We could have used display:none, but then we wouldn’t have fun.

  • The pointer-events:none deactivates the click on the invisible element, in browsers younger.

  • The transition:.5s prepares the animation, in case the fade of opacity.

 .checkshow input:checked ~ input[type="submit"] { opacity:1;pointer-events:auto }

  • Here we are saying "if you have any element of the kind submit, preceded by a checked, apply opacity 1 and activate the operation of inter mouse.

  • If we had several buttons, one by one checked, we would use the + in place of ~. The more means "immediately preceded element", ie, would bind each checkbox only to the button that is immediately following.

  • Thanks, it’s all right. The only small flaw of the proposed is that, with opacity, if the user unlucky to click where the hidden icon is, the message will be displayed. However, it will not interfere with the code as it will not be possible to delete as nothing has been marked.

  • @Thiagobarros can put a display:None, but then you can’t animate with fade. Actually I would eliminate the onclick, and put something more friendly. Taking advantage, you can check if you have something selected, if you do not have, or trigger. However, I will improve this.

  • I happen to be totally lay in jquery and javascript, I think I can already see, because I didn’t know where to start with something so simple in the language. Alert really is a bit of a nuisance, but in my case it will serve to delete records from the database, so I think for now it will do. Anyway, thank you very much!

  • @Thiagobarros I fixed. now do not click more if it is hidden: pointer-events:none deactivates, pointer-events:auto active. At least in newer browsers :) If you need older ones, you would have other techniques.

  • Is this parameter CSS3? I’ve never read about.

  • 1

    https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

  • 1

    Perfect @Bacco, thank you.

  • If in case you had one input within a td in the above example would work ?

Show 3 more comments

Browser other questions tagged javascript jquery

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