如果複選框被選中，將值添加到變量，如果不選中，恢復以前的值（jquery）

我是jquery的noob（和「noob」我的意思是「我幾個小時前開始使用jquery」）。我想要做的事情非常簡單：在複選框被選中時爲變量添加一個值，如果複選框未被選中，則恢復相同變量的前一個值。該值必須寫入文檔的範圍內。我有兩個問題與我寫的代碼：如果複選框被選中，將值添加到變量，如果不選中，恢復以前的值（jquery）

1-當取消選中複選框時，該值不會恢復;

2-我希望該值始終顯示在文檔中，即使是在頁面的第一次加載時，我也不知道該怎麼做（現在它出現在第一次點擊之後，因爲它寫在裏面if條件）

下面是腳本：它有什麼問題？

<script type="text/javascript"> 
    var pds1=0; 
    $(document).ready(function() { 
     $("#mat1").click(function() { 
      if($('#mat1').is(':checked')) { 
       pds1=pds1+10; 
       $('#perk1').html(pds1); 
      } 
      else { 
       if(pds1>0) 
       { 
        pds1=pds1-10; 
       } 
       else {} 
      } 
     }); 
    }); 
</script>

而這裏的HTML：

<input id="mat1" type="checkbox" /> <span id="perk1"></span>

來源

2012-07-28 She Hulk

你無論它的選中或取消選中更新跨度。您的代碼應該是這樣的：

var pds1 = 0; 
$(document).ready(function() { 
    $('#perk1').html(pds1); 

    $("#mat1").click(function() { 
     if ($('#mat1').is(':checked')) 
      pds1 = pds1 + 10; 
     else if (pds1 > 0) 
      pds1 = pds1 - 10; 
     $('#perk1').html(pds1); 
    }); 
});

的jsfiddle：http://jsfiddle.net/eHasK/2/

來源

2012-07-28 18:58:35 devundef

是的！它的工作原理，謝謝！ – 2012-07-28 19:01:55

不客氣。請將這個答案標記爲已接受，所以我得到了一些要點:) – devundef 2012-07-28 19:02:38

我馬上去做。你是否也知道我的第二個問題的答案？：P – 2012-07-28 19:04:09

所以，你以後兩件事情是：

顯示您的變量的初始值在頁面加載時
未選中該框時顯示更新的值。

見下文：

<script type="text/javascript"> 
var pds1=0; 
$(document).ready(function() { 
    $('#perk1').html(pds1); // Display initial value on page load 
    $("#mat1").click(function() { 
     if($('#mat1').is(':checked')) { 
      pds1=pds1+10; 
      $('#perk1').html(pds1); 
     } else { 
     if(pds1>0) 
     { 
      pds1=pds1-10; 
      $('#perk1').html(pds1); // Display updated value on uncheck 
     } 
     else {} 
     } 
    }); 
}); 
</script>

您可能也有興趣在數據綁定框架，例如敲除

http://knockoutjs.com/documentation/introduction.html

來源

2012-07-28 19:02:29

如果複選框被選中，將值添加到變量，如果不選中，恢復以前的值（jquery）

回答

相關問題