javascript從復選框輸入字符串值中提取子字符串

Question

在一組復選框下面，我想從框中檢索字符串的貨幣值以保持一致。

例如，如果復選框輸入值為“ Vantaux inegaux maxi vantail 2150 mm $ 1021.2”，我將得到1021.2。

這是我的代碼，但是使用.val（）時返回錯誤

未捕獲的TypeError：this.checked.val不是函數

復選框值

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if(this.checked) { console.log (this.checked.val()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/> 

有什么建議嗎？

Answer 1

在您的情況下： this不是引用jQuery對象，而是直接引用HTMLElement，因此要使用val()您需要使用$(this).val() ，但這不是必需的，因為您可以簡單地使用this.value

注意：
this.checked包含布爾值true或false，它沒有任何value屬性，因此請勿像this.checked.value這樣使用它，它是undefined 。

工作示例：

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if(this.checked) { console.log (this.value); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/> 

Answer 2

.checked屬性“返回”一個布爾值，指示是否選中了該復選框，因此，您可以使用.val()方法來獲取選中的復選框的值。

這是一個演示片段，用於從選中的復選框中獲取貨幣價值：

當你正在使用jQuery ，最好是堅持使用jQuery對象，所以， this應該在一個被包裹jQuery對象是這樣的： $(this) 。

要查看復選框是否被選中，我們將使用jQuery .is()方法。

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if($(this).is(':checked')) { console.log (/\\$(([\\d]+)(:?\\.[\\d]+)?)/.exec($(this).val())[1]); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/> 

希望我能進一步推動您。

Answer 3

如果您確定價格始終是最后的價格，則應將字符串拆分為“ $”並采用數組的最后一個元素：

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if(this.checked) { console.log (this.value.split("$").pop()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/> 

但是，如果我是您，並且如果我無法控制復選框的創建， data-pricevalue在創建復選框時，請輸入如下數據屬性： data-pricevalue ，然后從那里獲取該值

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if(this.checked) { console.log(this.getAttribute('data-pricevalue')); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" data-pricevalue="1021.2" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/> 

或可能會認為為什么支票上的值具有所有文本而不只是值，然后將所有文本都放在標簽等上

 <input type="checkbox" value="1021.2"/>Vantaux inegaux maxi vantail 2150 mm $1021.2 

編輯：如果評論是一個問題，請不要像這樣做somthin：

 $(document).ready(function() { function sumChecked() { var $totalSpan = $("#totalSum"); var totalSum = 0.0; $( "input:checked" ).each(function() { totalSum = totalSum + parseFloat(this.value); }); $totalSpan.html(totalSum); } $('input[type=checkbox]').change(function() { sumChecked(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="1021.2"/>Vantaux inegaux maxi vantail 2150 mm $1021.2</br> <input type="checkbox" value="901.8"/>Vantaux inegaux maxi vantail 1850 mm $901.8</br> <input type="checkbox" value="800.5"/>Vantaux inegaux maxi vantail 1000 mm $800.5</br> Total:<span id="totalSum"> </span>