jQuery fetch all checked checkboxes from a div through a click on button

Question

I need to get all the checkboxes CHECKED of a <div> in which it has another <div> daughter that this, possess a <input type="checkbox"> via jQuery.

Follows the structure:

<div class="metro perfil-filtro-expander-filtrados perfil-filtro-expander-overflow acoesFiltradas" id="acoesFiltradas">
     <--! item 1 -->
     <div style="padding-bottom: 10px;">
          <input id="@item.SelectedValue" type="checkbox" />
          <label for="@item.SelectedValue">
          <b>@item.Title</b>
          <br />
          <span class="perfil-filtro-expander-descricao">
               @item.Description
          </span>
          </label>
    </div>
    <--! item 2 -->
    <div style="padding-bottom: 10px;">
         <input id="@item.SelectedValue" type="checkbox" />
         <label for="@item.SelectedValue">
         <b>@item.Title</b>
         <br />
         <span class="perfil-filtro-expander-descricao">
              @item.Description
         </span>
         </label>
    </div>
    <--! item 3 -->
    <div style="padding-bottom: 10px;">
         <input id="@item.SelectedValue" type="checkbox" />
         <label for="@item.SelectedValue">
         <b>@item.Title</b>
         <br />
         <span class="perfil-filtro-expander-descricao">
               @item.Description
         </span>
         </label>
    </div>
</div>

jQuery:

$("#copiarParaTodasAcoes").click(function () {
    $(".acoesFiltradas :input:checked").each(function () {
        alert('teste');
    });
});

Knob:

<a href="">
   <img class="perfil-expander-botoes" id="copiarParaTodasAcoes" src="~/Images/tecbox/icons/expander-copy-icon.png" />
</a>

Answer 1

You can change your button code and javascript by these:

Knob (change this in for id on link tag <a> and remove from image)

<a href="" id="copiarParaTodasAcoes">
   <img class="perfil-expander-botoes" src="~/Images/tecbox/icons/expander-copy-icon.png" />
</a>

Javascript: (added the preventDefault() to ignore the main link action and remove the ':' from the input selector)

$("#copiarParaTodasAcoes").click(function (e) {
    e.preventDefault();

    $(".acoesFiltradas input:checked").each(function () {
        alert('teste');
    });
});

The rest of the html remains the same. example link working

Note: I tested in Firefox and Chorme.

Answer 2

Remove the element <a> that is encapsulating the element <img>, for this has no purpose. Unless you prefer to remove the element <img> and pass the image src as the element background <a>. In this case it will be necessary to use the following script: e.preventDefault();

$("#copiarParaTodasAcoes").on('click', function (e) {
    // caso seja utilizada a tag <a>: e.preventDefault();

    // o filtro para selecionar os inputs 'checked'
    // pode ser feito com o 'find' do jquery
    // $('.acoesFiltradas').find('input:checked')

    $(".acoesFiltradas input:checked").each(function () {
        alert(this.id);
    });
});