如何使用jquery在div中选中复选框？答案

【问题标题】：How to get checked checkbox inside in div using jquery?如何使用jquery在div中选中复选框？
【发布时间】：2016-04-26 10:15:49
【问题描述】：

我在一个 div 中有几个复选框列表被选中。如果选中复选框，我想更改 div 的背景颜色为绿色。

并且在未选中的复选框背景颜色应该是灰色的。

HTML 代码：

<div class="row">
    <label>
        <div class="col s3" style="padding:10px" id="div39">
            <div>
                <input type="checkbox" name="chk39" value="39" checked="">
                <span>Featured Project</span>
            </div>
        </div>
    </label>
    <label>
        <div class="col s3" style="padding:10px" id="div40">
            <div>
                <input type="checkbox" name="chk40" value="40">
                <span>Specials/Discounts</span>
            </div>
        </div>
    </label>
</div>

jQuery 代码：

var check = 1;
    $('div').find('input[type=checkbox]').click(function(event) {
        var val = $(this).val();
        if(check==1)
        {
            $('#div'+val).css({'background-color': 'lightgreen'});
            check=0;
        }else{
            $('#div'+val).css({'background-color': 'lightgray'});
            check=1;
        }
    });

$(document).ready(function($) {
        var selected = [];
        $('input[type=checkbox] :checked').each(function() {
            alert('asd');
            selected.push($(this).attr('value'));
        });
});

【问题讨论】：

标签： javascript jquery html css checkbox

【解决方案1】：

使用.closest 查找具有指定选择器的最近元素。
在check-box 元素上使用.change 侦听器而不是click
最初使用.change() 调用change-handler。

还要考虑Number(this.checked)，如果this.checked ==> false 或其他，它将是0。

$('div').find('input[type=checkbox]').change(function(event) {
  var color = ['lightgreen', 'lightgray'];
  var index = Number(this.checked);
  $(this).closest('.s3').css({
    'background-color': color[index]
  });
}).change();

$(document).ready(function($) {
  var selected = [];
  $('input[type=checkbox] :checked').each(function() {
    selected.push($(this).attr('value'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <label>
    <div class="col s3" style="padding:10px" id="div39">
      <div>
        <input type="checkbox" name="chk39" value="39" checked="">
        <span>Featured Project</span>
      </div>
    </div>
  </label>
  <label>
    <div class="col s3" style="padding:10px" id="div40">
      <div>
        <input type="checkbox" name="chk40" value="40">
        <span>Specials/Discounts</span>
      </div>
    </div>
  </label>
</div>

【讨论】：

谢谢伙计，它可以按我的意愿工作，但我希望在使用绿色检查时添加检查属性。背景颜色更改工作正常，但我如何添加选中的属性？
虽然也有答案……你为什么要这样做？你必须处理properties而不是attributes..
如果复选框已经选中并且当我取消选中它时，它正在工作，但是当我再次检查颜色更改但未选中时。
测试提供的snippet.. 它工作正常！

【解决方案2】：

您可以使用最接近的() 方法找到父 div。

$('div').find('input[type=checkbox]').click(function(event) {
  var val = $(this).val();
  var parent = $(this).closest(".col");
  if(this.checked) {
    parent.css({
      'background-color': 'lightgreen'
    });
  } else {
    parent.css({
      'background-color': 'lightgray'
    });
  }
});

Fiddle

【讨论】：

【解决方案3】：

$('div').find('input[type=checkbox]').click(function(event) {
      if($(this).is(':checked'))
      {
     $(this).closest('div').css({'background-color': 'lightgreen'});
      }
      else
      {
       $(this).closest('div').css({'background-color': 'lightgray'});
      }
    });

$(document).ready(function($) {
        var selected = [];
         $('input[type=checkbox]').not(':checked').closest('div').css({'background-color': 'lightgray'});
        $('input[type=checkbox]:checked').closest('div').css({'background-color': 'lightgreen'});

});

下面是更新的小提琴

https://jsfiddle.net/cc3q2axr/

【讨论】：

【解决方案4】：

我会这样做：

$("input[type='checkbox']").click(function() {
  if ($(this).prop("checked") === true) {
    $(this).closest(".col").css("background-color", "#36ac3b");
  } else {
    $(this).closest(".col").css("background-color", "#999");
  }
});

Here is the JSFiddle demo

【讨论】：