總計值屬性檢查框

這個jQuery代碼試圖總所有class = valid的input元素被檢查的value。它是如何完成的？ THX總計值屬性檢查框

Template.checkbox.events({ 
    'click .valid':() => { 
    $("input.valid:checked").each(function() { 
     console.log(this); //total them here 
    }) 
    } 
});

<template name="checkbox"> 
    <div class="checkbox-container"> 
    <div class="checkbox"> 
     <label class="check"> 
     <input class="valid" type="checkbox" name={{name}} value={{value}} checked={{checked}}>{{label}} 
     <input class="count" type="checkbox" name={{name}} value={{value}} checked={{checked}}> 
     </label> 
    </div> 
    </div> 
</template>

來源

2017-03-06 Fred J.

好吧，你需要點擊處理程序中的變量簡單地作爲一個總和，那麼，在裏面。每個（）函數，將$（this）.val（）添加到sum變量。猜測。我不知道流星，所以我不能肯定地說，但我就是這樣。 – Snowmonkey

['reduce']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce）是良好的用於在循環和。 –

你有jsfiddle看嗎？ –

var total = null; 
Template.checkbox.events({ 
    'click .valid':() => { 
    $("input.valid:checked").each(function() { 
     total += parseFloat(this.value); 
    }) 
    } 
}); 
console.log(total);

來源

2017-03-06 21:38:38

在Meteor的Template事件處理程序之外創建一個變量並不是一個好主意。如果你需要它在事件助手的範圍之外，它應該存儲在一個'Session'中。 –

@SterlingArcher我不知道流星東西，使我的解釋上的錯誤，但是這一個變量需要設置爲按住接聽和值需要被添加到無論這個變量是正確的總體思路。 –

你的選擇是好，現在你只需要增加一個值的每個循環。您可以使用.map把所有的值到一個數組，然後reduce它：

var total = $("input.valid:checked").map(function() { 
    return this.value; 
}).get().reduce(function(t, number) { 
    return t += parseInt(number, 10); 
}, 0);

來源

2017-03-06 21:39:20 tymeJV

這很好，但它可以與Lambdas更ES6'd！ –

@SterlingArcher - 我可以LAMBDA了'reduce'電話 - 但jQuery的'each'可能不應該，會亂用'this'價值 – tymeJV

我敢肯定有來處理這一個更大氣的方式，但我鄙視流星所以我會同意 –

總計值屬性檢查框

回答

相關問題