javascript - How to get checked checkbox inside in div using jquery? - Stack Overflow

admin管理员组

文章数量:1291024

I have list of checkbox inside a div few are checked. i want to change background color green of div when if checkbox is checked.

And On non checked checkbox background color should be gray.

HTML Code :

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

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

I have list of checkbox inside a div few are checked. i want to change background color green of div when if checkbox is checked.

And On non checked checkbox background color should be gray.

HTML Code :

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

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

Share Improve this question Follow asked Apr 26, 2016 at 10:15 Manish TiwariManish Tiwari 1,8661010 gold badges4545 silver badges6868 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

• Use .closest to find the closest element having specified selector.
• Use .change listener over check-box elements than click
• Use .change() to invoke change-handler initially.

Also consider Number(this.checked), It will be 0 if this.checked ==> false or otherwise.

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

you can find the parent div using the closest() method.

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

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

});

Below is the updated fiddle

https://jsfiddle/cc3q2axr/

This is how I would do it:

$("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

本文标签： javascriptHow to get checked checkbox inside in div using jqueryStack Overflow