Question

我有一个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'));
        });
});

Answer 1

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

另请考虑Number(this.checked)，如果0或其他情况，则为this.checked ==> false。

＆＃13;

$('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'));
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用nearest（）方法找到父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

Answer 3

我就是这样做的：

{{1}}

Here is the JSFiddle demo

Answer 4

$('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/

如何使用jquery在div里面检查复选框？

4 个答案: