如何使用jquery在div中檢查複選框？

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或以其他方式。

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

Answer 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

Answer 3

這是我會怎麼做：

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

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/