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

Question

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

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I need to search all checkboxes CHECKED of a <div> where you have another <div> daughter who is, has a <input type="checkbox"> via jQuery .

The structure follows:

<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');
    });
});

Button:

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

javascript html jquery html5

asked by anonymous 20.08.2015 / 20:05

2 answers

1

Remove the <a> element that is encapsulating the <img> element, since it has no purpose. Unless you prefer to remove the <img> element and pass the src of the image as background of the <a> element. In this case it is 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);
    });
});

20.08.2015 / 20:46

Limiting number of selected values Ignore point in a Query

score 2 · Accepted Answer

You can change your button code and javascript by these:

Button (the change is in by the id in the link tag <a> and remove from the image)

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

Javascript: (added preventDefault() to ignore the main action of the link and removed ':' 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 Firefox and Chorme.