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那样使用它，它将是{{1 }}。

工作示例：

undefined

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

Answer 2

.checked属性“返回”一个布尔值，指示是否选中了该复选框，因此，您可以使用.val()方法来获取选中的复选框的值。

下面是一个演示代码段，用于从选中的复选框中获取货币价值：

在使用jQuery时，最好坚持使用jQuery对象，因此，this应该像这样包装在jQuery对象中：{{1 }}。

要查看是否已选中此复选框，我们将使用$(this) jQuery方法。

.is()

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

希望我进一步推动了你。

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这样的数据属性，然后从那里获取该值

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

编辑：如果评论是一个问题，我会像这样不适吗？

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

javascript从复选框输入字符串值中提取子字符串

3 个答案: