【问题标题】:Display and sum values from selected checkboxes different in divs at the same time同时显示和汇总来自 div 中不同的选定复选框的值
【发布时间】:2018-09-19 09:04:51
【问题描述】:

我是新来的,所以这个问题对你来说可能很愚蠢。

我有一个网站,其中显示了一些复选框。这些复选框有一些需要与价格相加的值,它们还有一个需要在 div 中显示的文本。

Here's the demo website,如您所见,复选框需要将自己的价格与橙色图片相加(它们有两个不同的divs),然后将值插入divid=plus-display

目前我猜到了这个解决方案,但它根本不起作用。

var basicPrice = 784 ; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
 CurrentPrice = basicPrice,
   plus = [],
   total = 0;
   console.log(currentPrice)
  $("input[id^=plus]").each(function() {
    if (this.checked) {
      total += +this.value;
      plus.push($("[for=" +this.id + "]").html()); // get the label text
    }
  });

 $("#plus-display").html(plus.join(", "));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784 €</span>

<br> <br><br>

<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>

<br><br><br>

<span id="rata-display-2" class="prezzo-checkout">784 €</span>

<br><br><br>

<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

【问题讨论】:

  • services 是存储名称的数组?
  • 对不起,我的错误..我已经编辑了这个问题..这不是服务,而是加..我想将来自id=plus的数据与id=plus-display合并到div中
  • .join 不会对数组中的值求和,它只会以, 作为分隔符将它们连接起来。这是你想要的吗?
  • 如果你想求和,你可以使用reduce数组方法。 developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/…
  • 是的,它是正确的.. 我想在divid=plus-display 中加入他们的名字,然后,同时,我想将复选框的值与两个 div 相加与id=rata-display-1id=rata-display-1

标签: javascript jquery html checkbox


【解决方案1】:

我刚刚创建了一个简单的解决方案。可能会更容易。 步骤如下:

  1. 在你添加的所有类上声明一个 Click 事件 复选框(“我假设 check-plus 是可用的类 仅限复选框")
  2. 在点击事件中只需调用 .each in JQuery 并计算总和并显示..

请查看代码示例以正确理解。

$('.check-plus').click(function(e){
let sum = 784; // Base Price
	$(":checked").each(function(){
     //   console.log($(this).val());
        sum = sum + Number($(this).val());
     //   console.log("Total Amount :",sum);
    });
  $('#display').html("Total Amount is : "+sum+"€");  
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

<h2 id="display">

</h2>

【讨论】:

  • 它穿了!但我还有另一个问题.. 可以在带有id=plus-display 的 div 中显示复选框的name 吗? $("#plus-display").html(plus.join(", "));
  • 是的,有可能...jsfiddle.net/jub19tav/16请看这段代码..
【解决方案2】:

纯JS解决方案:

const form = document.getElementsByTagName("form")[0]

form.addEventListener("click", (e) => { // taking advantage of eventBubbling here
  const target = e.target

  if(String(target).toLowerCase().includes("input")) { // naive check if clicked element is input - you should implement better check most probably
    const clickedCheckboxValue = parseFloat(target.value)
    const currentSumElement = document.querySelector("#sum") 
    const currentSum = parseFloat(currentSumElement.innerText)    

    currentSumElement.innerText = target.checked
      ? currentSum + clickedCheckboxValue 
      : currentSum - clickedCheckboxValue 
  }
})

这段代码什么时候被触发?您在这里没有任何类型的eventListener,您的代码中是否有它?

很高兴知道这个方法是如何被触发的。

通常我会建议不同的方法:

  • 将事件监听器添加到每个复选框(或它们的共同父级,以便您可以利用 eventBubbling - 这是常见的场景)
  • 点击时,检查被点击的复选框是否为:
    • 已选中 - 您应该添加到您的总和中
    • 未选中 - 您应该从总和中减去
  • 获取复选框旁边的值
  • 加/减到总和

还请更详细地描述应该发生的事情。 前任。 在#someID 上单击获取.someClassName 中的值并将其添加/减去#someOtherID 中的值

codepen 中的粗略草图:

https://codepen.io/anon/pen/mGaVoe

【讨论】:

    【解决方案3】:

    我将在复选框上添加一个事件监听器。所以每次它改变时,你都可以重新计算你需要的东西。此外,我更改了 foreach 的选择器,因为您没有以 plus 开头的 id... 希望对您有所帮助。

    var basicPrice = 784 ; // This is how we start
    $(document).on('change','input[type=checkbox]', getCheck);
    function getCheck() {
    var currentPrice = basicPrice; // every time
     CurrentPrice = basicPrice,
       plus = [],
       total = 0;
       console.log(currentPrice)
      $("input[type=checkbox]").each(function(i, el) {
       
        if ($(el).is(":checked")) {
         
          total += parseInt($(el).val());
          console.log(total);
          // UPDATE:
          plus.push($(el).data('name')); // get the label text
        }
      });
    
     $("#plus-display").html(plus.join(", "));
     $('#rata-display-2').html(total);
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784 €</span>
    
    <br> <br><br>
    
    <div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>
    
    <br><br><br>
    
    <span id="rata-display-2" class="prezzo-checkout">784 €</span>
    
    <br><br><br>
    
    <form id="plus" name="plus" data-name="plus" class="form-5">
              <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
              <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
              <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
              <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
              <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
              <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
              <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
              <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
    </form>

    【讨论】:

    • 成功了!我有一个问题.. 而不是从这一行推送 html:plus.push($("[for=" +this.id + "]").html()); 是否可以推送 namedata-name?类似的东西--> plus.push($("[for=" +this.id + "]").data(name)); ??
    • 我已经使用元素来获取数据名称。检查它是否是你想要的。问候
    【解决方案4】:

    这可以使用 JQuery 来实现,但我实际上修改了您的 span 标记以与货币分隔,以便该值是动态的(但是我只用一个结帐值对其进行了测试)...
    请务必使用parseInt()检索span标签中的文字,使其成为数字
    建议您参考this link以更好地了解这个想法。

    $(".check-plus").on("change",function(){
    var basic = 784;
    $(".check-plus").each(function(){
      	if(this.checked){
    basic += parseInt(this.getAttribute("value"))
    name += this.getAttribute("name")+"<br>"
    }
    })
    $(".checkout.rata").text(basic);
    $("#plus-display").html(name)
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784</span><span class='currency'> €</span>
    
    <br> <br><br>
    
    <div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>
    
    <br><br><br>
    
    <span id="rata-display-2" class="prezzo-checkout">784 €</span>
    
    <br><br><br>
    
    <form id="plus" name="plus" data-name="plus" class="form-5">
              <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
              <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
              <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
              <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
              <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
              <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
              <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
              <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
    </form>

    【讨论】:

      【解决方案5】:

      您的输入没有以plus 开头的 ID,因此您的选择器在这里有问题。 您可以使用form#plus div[class^=plus-] input 作为您的选择器。这限制了选择器的范围以及避免冲突。

      在您的 javascript 的第一行中似乎也发生了一些事情:

      var currentPrice = basicPrice; // every time
       CurrentPrice = basicPrice,
         plus = [],
         total = 0;
      

      您可能不想设置 currentPriceCurrentPrice(两个不同的变量) - 以及声明前面缺少的 var 关键字。

      希望这对您有所帮助,但不会让您失去编码的乐趣! :)

      【讨论】:

      • 看一下,如果你愿意,你也可以从选择器中删除div[class^=plus-]
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-12-19
      • 2011-11-07
      • 1970-01-01
      • 2021-02-13
      • 2014-06-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多