JSFiddle - React, Tailwind, and code Playground
HTML
<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>
<a href="" id="copiarParaTodasAcoes">
<img class="perfil-expander-botoes" src="~/Images/tecbox/icons/expander-copy-icon.png" />
</a>
</div>
CSS
.metro label {
display: block;
margin: 5px;
padding: 5px;
border: 1px solid transparent;
}
.metro input[type="checkbox"] {
display: none;
}
.metro input:checked + label {
border-color: green;
position: relative;
}
.metro input:checked + label::after {
content: '\2714';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent;
border-right-color: green;
color: white;
font-size: 12px;
text-indent: 10px;
line-height: 13px;
}
JavaScript
$("#copiarParaTodasAcoes").click(function (e) {
e.preventDefault();
$(".acoesFiltradas input:checked").each(function () {
alert('teste');
});
});