如何根據選中或未選中的複選框來更改變量？

Question

我有這樣一個複選框...

<input type="checkbox" id="something" name="something" value="25" data-val="25" checked="checked" class="option"> 
    <label for="something">Something</label> 

我想有，每一個時間複選框被選中或取消選中的JavaScript/jQuery代碼，它看起來看看它的檢查，並分配是否值25它被選中，如果沒有選中，則爲0。但是，當我通過檢查/取消選中進行測試時，它只是繼續吐出25.爲什麼當我取消選中時它不會變爲0？任何想法我做錯了什麼？

$(document).ready(function() { 
    $('.option').on('change', function() { 
     if ($('#something').attr('checked')) { 
      var something = 25; 
     } else { 
      var something = 0; 
     } 
     console.log(something); 
    }); 
}); 

Answer 1

.attr()方法返回string「選中」 - 的複選框，這不改變的初始狀態。
它將始終評估爲true，並且if condition將始終運行。

要檢索和更改DOM屬性（如選中的，選中的，表單元素的 或禁用狀態），請使用.prop（）方法。

因此，使用.prop()你可以得到true/false值：

$('.option').on('change', function() { 
    var something; 
    if ($(this).prop('checked')) { 
     something=25; 
     } 
    else { 
     something = 0; 
     } 
     console.log(something); 
}); 

或者你可以檢查如果checkbox與.is()方法，它返回boolean檢查。的

$('.option').on('change', function() { 
     var something; 
     if ($(this).is(':checked')) { 
      something=25; 
     } else { 
      something = 0; 
     } 
     console.log(something); 
});