单击div更改复选框状态(是/否) [英] change checkbox status (true/ false) on div click

问题描述

我有具有图像，标签和输入复选框的div.当我单击div时，我喜欢什么，它将复选框状态从true更改为false并用虎钳

i have div that have image, label and input check-box. what i like when i click on div, it change check-box status from true to false and vise verse

jQuery

$(".markerDiv").click(function () {

    if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

          $(this).find('input:checkbox[name=markerType]').attr("checked", false);
    }
    else {
          $(this).find('input:checkbox[name=markerType]').attr("checked", true);
    }


 alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});

html

<div class="markerDiv"  id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  /> </div> <br />

推荐答案

请按照本指南中的指导使用prop.由于您的复选框位于div中，并且由于div已向click事件注册，因此它可能会阻止您使用复选框.使用e.stopPropagation也可以使复选框本身可点击.

use prop as you been guide through out this blog. As your check-box is in div and because div is registered with click event, it may stop you using check-box. Use e.stopPropagation to make check-box itself click-able too.

$('.markerDiv').click(function () {

  if ($(this).find('input:checkbox[name=markerType]').is(":checked")) {

    $(this).find('input:checkbox[name=markerType]').attr("checked", false);
  }
  else {
      $(this).find('input:checkbox[name=markerType]').prop("checked", true);
  }

   alert($(this).find('input:checkbox[name=markerType]').is(":checked"));
});


 $('input[type=checkbox]').click(function (e) {
     e.stopPropagation();
 });

这篇关于单击div更改复选框状态(是/否)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！