I have a problem that I could not resolve, I have toggle
done in bootstrap
that conflicts with a checkbox
on my page, I have a checkbox
when clicking to check / uncheck toggle
is triggered.
The code for my checkbox is this:
<input id="MarcaDesmarca" type="checkbox" name="MarcaDesmarca" />
$(function () { $('#MarcaDesmarca').click(function () { var val = this.checked; $("input[name='Lista[]']").each(function(){ $(this).prop('checked', val); }); }); });
The image of what I have is this:
Thestructurelookslikethis:
<divclass="toggle toggle-transparent toggle-bordered-full margin-top-20">
<div class="row">
<div class="col-sm-5">Descrição</div>
<div class="col-sm-4">Nome</div>
<div class="col-sm-2">Data</div>
<div class="col-sm-1"><input id="MarcaDesmarca" type="checkbox" name="MarcaDesmarca" /></div>
</div>
<!-- CABEÇALHO DO TOGGLE !-->
<?php foreach ($Resultado as $Retorno) {
$IdUnicoop = $Retorno->IdUnicoop;
// UNIDADE
$sqlUnicoop = "SELECT *
FROM 'cadUnicoop'
WHERE 'IdUnicoop' = ?
AND 'Ativo' = 1
ORDER BY Nome ASC";
$arrayUnicoop = array($IdUnicoop);
$ResUnicoop = $crud->getSQLGeneric($sqlUnicoop, $arrayUnicoop, TRUE);
// NOME DA UNIDADE
foreach ($ResUnicoop as $NomeUnicoop) {
$NomeUnicoop->Nome;
}
?>
<div class="toggle">
<label>
<div class="row">
<div class="col-sm-5"><?php echo $Retorno->Descricao; ?></div>
<div class="col-sm-4"><?php echo $NomeUnicoop->Nome; ?></div>
<div class="col-sm-2"><?php echo implode("/", array_reverse(explode("-", $Retorno->Data))); ?></div>
<div class="col-sm-1"><input type="checkbox" name="Lista[]" value="<?php echo $Retorno->IdOrdem; ?>" /></div>
</div>
</label>
<!-- CONTEÚDO DO TOGGLE !-->
<div class="toggle-content">
<div class="row">
<div class="col-sm-3"><?php echo $Retorno->Produto; ?></div>
<div class="col-sm-3"><?php echo $Retorno->Safra; ?></div>
<div class="col-sm-3"><?php echo $Retorno->Peso; ?></div>
<div class="col-sm-3"><?php echo $Retorno->Valor; ?></div>
</div>
</div>
</div>
<?php } ?>
Function Toggle
function _toggle() {
var $_t = this,
previewParClosedHeight = 25;
jQuery("div.toggle.active > p").addClass("preview-active");
jQuery("div.toggle.active > div.toggle-content").slideDown(400);
jQuery("div.toggle > label").click(function(e) {
var parentSection = jQuery(this).parent(),
parentWrapper = jQuery(this).parents("div.toggle"),
previewPar = false,
isAccordion = parentWrapper.hasClass("toggle-accordion");
if(isAccordion && typeof(e.originalEvent) != "undefined") {
parentWrapper.find("div.toggle.active > label").trigger("click");
}
parentSection.toggleClass("active");
if(parentSection.find("> p").get(0)) {
previewPar = parentSection.find("> p");
var previewParCurrentHeight = previewPar.css("height");
var previewParAnimateHeight = previewPar.css("height");
previewPar.css("height", "auto");
previewPar.css("height", previewParCurrentHeight);
}
var toggleContent = parentSection.find("> div.toggle-content");
if(parentSection.hasClass("active")) {
jQuery(previewPar).animate({height: previewParAnimateHeight}, 350, function() {jQuery(this).addClass("preview-active");});
toggleContent.slideDown(350);
} else {
jQuery(previewPar).animate({height: previewParClosedHeight}, 350, function() {jQuery(this).removeClass("preview-active");});
toggleContent.slideUp(350);
}
});
}