When checking checkbox, leave link visible

Question

When checking checkbox, leave link visible

Navigation

#1 by (8 votes)

6

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

I would like that when a checkbox is checked, the button will appear, and if there is no checkbox, it will disappear. Ah, if possible, a simple effect of fadeIn and fadeOut.

HTML checkbox

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

Button HTML that should appear after:

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

javascript jquery

asked by anonymous 12.02.2016 / 00:14

1 answer

How to filter the format of the file by the input type file? How to solve an elseif that needs to be unique?

score 8 · Accepted Answer

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 stay hidden. We could have used display:none , but then we would not have animation.
pointer-events:none disables clicking the invisible element, in browsers newest.
The transition:.5s prepares the animation, in this 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 type submit , preceded by a checked element, apply opacity 1 and enable mouse pointer / p>
If we had multiple buttons, one by% with%, we would use checked instead of + . The more it means "immediately preceded element", that is, it would bind each checkbox to just the button that is next.