Tengo 3 Divs, cada div contiene 2 entradas, solo quiero marcar las casillas de verificación en el mismo div con id y sin marcar de otros divs.
HTML es:
<div class="dashboard"> <div id="fr"> <h3>Fruits</h3> <label> <input type="checkbox" name="check1" />Kiwi</label> <label> <input type="checkbox" name="check2" />Jackfruit</label> </div> <div id="an"> <h3>Animals</h3> <label> <input type="checkbox" name="check1" />Tiger</label> <label> <input type="checkbox" name="check2" />Sloth</label> </div> <div id="veg"> <h3>vegetables</h3> <label> <input type="checkbox" name="check1" />Tiger</label> <label> <input type="checkbox" name="check2" />Sloth</label> </div> </div>y JQuery es:
$("input:checkbox").on('click', function() { var $box = $(this); if ($box.is(":checked")) { var group = "input:checkbox[name='" + $box.attr("name") + "']"; $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); } });ver ejemplo en vivo
Si solo desea permitir que las casillas de verificación se marquen dentro de un solo div , puede usar jQuery para atravesar el DOM usando closest() , siblings() y find() para recuperar las casillas de verificación externas antes de deseleccionarlas.
Prueba esto:
$("input:checkbox").on('change', e => { $(e.target).closest('div').siblings().find('input:checkbox').prop('checked', false); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dashboard"> <div id="fr"> <h3>Fruits</h3> <label><input type="checkbox" name="check1" />Kiwi</label> <label><input type="checkbox" name="check2" />Jackfruit</label> </div> <div id="an"> <h3>Animals</h3> <label><input type="checkbox" name="check1" />Tiger</label> <label><input type="checkbox" name="check2" />Sloth</label> </div> <div id="veg"> <h3>vegetables</h3> <label><input type="checkbox" name="check1" />Tiger</label> <label><input type="checkbox" name="check2" />Sloth</label> </div> </div>