如何修复：为前两个复选框添加具有不同值的复选框的值答案

【问题标题】：How to fix: Adding value of checkboxes with different value for first two checkboxes如何修复：为前两个复选框添加具有不同值的复选框的值
【发布时间】：2019-06-10 13:26:27
【问题描述】：

尝试根据前两个复选框的选择将各种复选框的值相加。 Select 用于表示页面的 POST，是 100kms 和 200kms 和其他复选框的乘数。它以不相乘的每日速率显示，并以相乘的总和显示。我有一种感觉，要么是语法错误，要么是函数调用错误。

我尝试创建一组不同的函数来服务于它自己的目的和不可避免的加法/乘法。我试图改变函数调用另一个函数的位置，例如DisplayVals1 和Calculate1。我的小提琴是在这里观看的。 https://jsfiddle.net/shiataz12/mjnqth3L/83/

 $("#qr3").click(function() {
     var n3 = $( "input[name='checkbox1']:checked" ).length;
     if(n3) {
       Calculate1();
     }
     else {
       Calculate2();
     }
 });

sn-p 以上是我尝试使用的，用于在总数中添加额外的复选框。

【问题讨论】：

您好，欢迎您。 jsFiddle 没有运行，因为它有很多错误。主要问题是具有相同 ID qr3 的多个复选框。在这种情况下，整个事件不会触发。此外，您可以简单地使用 $('id').checked 来检查复选框的状态。
我可以然后将其拆分为一个数组以添加它们，但我将如何检查并添加 #qr1 或 #qr2 的值
所以我已经做了更多的工作，并在这里遇到了一个新问题，我无法将200kms 的值从100kms jsfiddle.net/shiataz12/mjnqth3L/169 更改为
首先，如果您希望前两个复选框互斥，请将它们更改为单选按钮
非常感谢@Daryll

标签： jquery checkbox syntax add

【解决方案1】：

根据评论建议 id 必须是唯一的。您可以使用prop("checked", true); 来检查复选框是否被选中，如下所示。你的小提琴有错误，所以我只删除其他代码并调用函数。

$(document).ready(function() {
  if ($("input[name='checkbox1']").prop("checked") == true) {
    Calculate1();
  }
  $('input[name="checkbox1"]').click(function() {
    $('input[name="checkbox2"]').prop('checked', false);
  });
  if ($("input[name='checkbox2']").prop("checked") == true) {
    Calculate2();
  }
  $('input[name="checkbox2"]').click(function() {
    $('input[name="checkbox1"]').prop('checked', false);

  });
});


function Calculate1() {
  alert('calling Calculate1 function');
}

function Calculate2() {
  alert('calling Calculate2 function');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<label for="mySelect">No. Days</label>
<select name="mySelect" id="mySelect">
  <option name="one" value="1">1</option>
  <option name="two" value="2">2</option>
  <option name="three" value="3">3</option>
  <option name="four" value="4">4</option>
  <option name="five" value="5" selected>5</option>
</select><br><br>
<label for="checkbox1">100kms</label>
<input type="checkbox" name="checkbox1" value="125" id="qr1" checked>111<br><br>
<label for="checkbox2">200kms</label>
<input type="checkbox" name="checkbox2" value="225" id="qr2">222<br><br>
<label for="checkbox3">Tyre</label>
<input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br>
<label for="checkbox4">Glass</label>
<input type="checkbox" name="checkbox4" value="20" id="qr4"><br><br>
<label for="checkbox5">General</label>
<input type="checkbox" name="checkbox5" value="60" id="qr5" checked><br><br>
<label for="checkbox6">Third Party</label>
<input type="checkbox" name="checkbox6" value="80" id="qr6"><br><br> Daily :<span id="userdaily"> </span><br><br> Total :<span id="usertotal"> </span><br><br>
<input type="text" id="pricef1" name="pricef1" value="">
<input type="text" id="pricef2" name="pricef2" value="">

【讨论】：

【解决方案2】：

从您的 cmets 回答您的新问题：您在 2 个地方使用了kilo1，而您打算使用kilo2。检查：https://jsfiddle.net/oaxtz8q7/

这样的地方

kms41 =  parseInt(Multiplier) * parseInt(kilo1);

应该是

kms41 =  parseInt(Multiplier) * parseInt(kilo2);

【讨论】：

哇，这么小的错误，感谢您在花时间阅读完这些烂摊子后指出这一点。
不幸的是，Extras checkbox 3 - 6 似乎不会添加，我是否需要更改最后一个 if 语句，其中在检查 extra 时检查了 100kms 和 200kms？跨度>
不客气。使用开发人员工具 (F12) 我看到错误“kilo1 未定义”，然后简单地搜索了kilo1。我不确定你的意思是那些复选框没有添加。
不用担心，把我的答案贴在上面。
想一想你用什么来运行你的代码？括号还是其他？

【解决方案3】：

对于任何对此主题感兴趣的人，我发现了这个问题，尽管我的代码可能会有所减少，但我设法让我的小提琴工作并将其发布在这里供任何人查看。错误出现在else if ($(($('input[name="checkbox2"]').prop("checked") == true) { 行中，这不一定会执行，因为第一个语句无论如何都会返回 false。反正我就是这么想的。 https://jsfiddle.net/shiataz12/Lo1yek2g/7/。如果更简单，我添加了代码 sn-p。

$(document).ready(function() {
  if ($('input[name="checkbox1"]').prop("checked") == true) {
    displayVals1();
  }
  if ($('input[name="checkbox2"]').prop("checked") == true) {
    displayVals2();
  }
});
$('input[name="checkbox1"]').click(function() {
  $('input[name="checkbox2"]').prop('checked', false);
});
$('input[name="checkbox2"]').click(function() {
  $('input[name="checkbox1"]').prop('checked', false);
});
$('input[name="checkbox5"]').click(function() {
  $('input[name="checkbox6"]').prop('checked', false);
});
$('input[name="checkbox6"]').click(function() {
  $('input[name="checkbox5"]').prop('checked', false);
});
$("#qr1").change(function() {

  //$("#qr1").prop('disabled', true);
  //$("#qr2").prop('disabled', false);
});
$("#qr2").change(function() {
  //$("#qr2").prop('disabled', true);
  //$("#qr1").prop('disabled', false);
});
$("#qr5").change(function() {
  $("#qr5").prop('disabled', true);
  $("#qr6").prop('disabled', false);
});
$("#qr6").change(function() {
  $("#qr6").prop('disabled', true);
  $("#qr5").prop('disabled', false);
});

function displayVals1() {
  Calculate1();
  var extras11 = 0;
  var extras12 = 0;
  var extra11a = 0;
  var extra12a = 0;
  var extra13a = 0;
  var extra14a = 0;
  var extra11b = 0;
  var extra12b = 0;
  var extra13b = 0;
  var extra14b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo1 = $('input[id="qr1"]').val();
  var total11 = 0;
  var kms11 = 0;
  var fullTot11 = 0;
  var fullTot12 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1a = $("input[name='checkbox3']").val();
    extra11a = parseInt(extra1a) * parseInt(Multiplier);
    extra11b = parseInt(extra1a);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2a = $("input[name='checkbox4']").val();
    extra12a = parseInt(extra2a) * parseInt(Multiplier);
    extra12b = parseInt(extra2a);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3a = $("input[name='checkbox5']").val();
    extra13a = parseInt(extra3a) * parseInt(Multiplier);
    extra13b = parseInt(extra3a);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4a = $("input[name='checkbox6']").val();
    extra14a = parseInt(extra4a) * parseInt(Multiplier);
    extra14b = parseInt(extra4a);
  }
  extras11 = parseInt(extra11b) + parseInt(extra12b) + parseInt(extra13b) + parseInt(extra14b);
  extras12 = parseInt(extra11a) + parseInt(extra12a) + parseInt(extra13a) + parseInt(extra14a);
  total11 = parseInt(extras12);
  kms11 = parseInt(Multiplier) * parseInt(kilo1);
  fullTot11 = parseInt(total11) + parseInt(kms11);
  fullTot12 = parseInt(extras11) + parseInt(kilo1);
  $("#pricef1").val(fullTot12);
  $("#pricef2").val(fullTot11);
}

function Calculate1() {
  var extras21 = 0;
  var extras22 = 0;
  var extra21a = 0;
  var extra22a = 0;
  var extra23a = 0;
  var extra24a = 0;
  var extra21b = 0;
  var extra22b = 0;
  var extra23b = 0;
  var extra24b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo1 = $('input[id="qr1"]').val();
  var fullTot21 = 0;
  var fullTot22 = 0;
  var total21 = 0;
  var kms21 = 0;
  var total22 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1b = $("input[name='checkbox3']").val();
    extra21a = parseInt(extra1b) * parseInt(Multiplier);
    extra21b1b = parseInt(extra1b);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2b = $("input[name='checkbox4']").val();
    extra22a = parseInt(extra2b) * parseInt(Multiplier);
    extra22b = parseInt(extra2b);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3b = $("input[name='checkbox5']").val();
    extra23a = parseInt(extra3b) * parseInt(Multiplier);
    extra23b = parseInt(extra3b);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4b = $("input[name='checkbox6']").val();
    extra24a = parseInt(extra4b) * parseInt(Multiplier);
    extra24b = parseInt(extra4b);
  }
  extras21 = parseInt(extra21a) + parseInt(extra22a) + parseInt(extra23a) + parseInt(extra24a);
  extras22 = parseInt(extra21b) + parseInt(extra22b) + parseInt(extra22b) + parseInt(extra22b);

  total21 = parseInt(extras21);
  kms21 = parseInt(Multiplier) * parseInt(kilo1);
  fullTot21 = parseInt(total21) + parseInt(kms21);
  fullTot22 = parseInt(kilo1) + parseInt(extras22);

  $("#usertotal").text('R ' + fullTot21 + '/day');
  $("#userdaily").text('R ' + fullTot22 + '/day');
}

function displayVals2() {
  Calculate2();
  var extras31 = 0;
  var extras32 = 0;
  var extra31a = 0;
  var extra32a = 0;
  var extra33a = 0;
  var extra34a = 0;
  var extra31b = 0;
  var extra32b = 0;
  var extra33b = 0;
  var extra34b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo2 = $('input[id="qr2"]').val();
  var total31 = 0;
  var kms31 = 0;
  var fullTot31 = 0;
  var fullTot32 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1c = $("input[name='checkbox3']").val();
    extra31a = parseInt(extra1c) * parseInt(Multiplier);
    extra31b = parseInt(extra1c);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2c = $("input[name='checkbox4']").val();
    extra32a = parseInt(extra2c) * parseInt(Multiplier);
    extra32b = parseInt(extra2c);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3c = $("input[name='checkbox5']").val();
    extra33a = parseInt(extra3c) * parseInt(Multiplier);
    extra33b = parseInt(extra3c);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4c = $("input[name='checkbox6']").val();
    extra34a = parseInt(extra4c) * parseInt(Multiplier);
    extra34b = parseInt(extra4c);
  }
  extras31 = parseInt(extra31a) + parseInt(extra32a) + parseInt(extra33a) + parseInt(extra34a);
  extras32 = parseInt(extra31b) + parseInt(extra32b) + parseInt(extra33b) + parseInt(extra34b);
  total31 = parseInt(extras31);
  kms31 = parseInt(Multiplier) * parseInt(kilo2);
  fullTot31 = parseInt(extras32) + parseInt(kilo2);
  fullTot32 = parseInt(total31) + parseInt(kms31);

  $("#pricef1").val(fullTot31);
  $("#pricef2").val(fullTot32);
}

function Calculate2() {
  var extras41 = 0;
  var extras42 = 0;
  var extra41a = 0;
  var extra42a = 0;
  var extra43a = 0;
  var extra44a = 0;
  var extra41b = 0;
  var extra42b = 0;
  var extra43b = 0;
  var extra44b = 0;
  var Multiplier = $("#mySelect").val();
  var kilo2 = $('input[id="qr2"]').val();
  var fullTot41 = 0;
  var fullTot42 = 0;
  var total41 = 0;
  var kms41 = 0;
  var total42 = 0;
  if ($("input[name='checkbox3']").prop("checked") == true) {
    var extra1d = $("input[name='checkbox3']").val();
    extra41a = parseInt(extra1d) * parseInt(Multiplier);
    extra41b = parseInt(extra1d);
  }
  if ($("input[name='checkbox4']").prop("checked") == true) {
    var extra2d = $("input[name='checkbox4']").val();
    extra42a = parseInt(extra2d) * parseInt(Multiplier);
    extra42b = parseInt(extra2d);
  }
  if ($("input[name='checkbox5']").prop("checked") == true) {
    var extra3d = $("input[name='checkbox5']").val();
    extra43a = parseInt(extra3d) * parseInt(Multiplier);
    extra43b = parseInt(extra3d);
  }
  if ($("input[name='checkbox6']").prop("checked") == true) {
    var extra4d = $("input[name='checkbox6']").val();
    extra44a = parseInt(extra4d) * parseInt(Multiplier);
    extra44b = parseInt(extra4d);
  }
  extras41 = parseInt(extra41a) + parseInt(extra42a) + parseInt(extra43a) + parseInt(extra44a);
  extras42 = parseInt(extra41b) + parseInt(extra42b) + parseInt(extra42b) + parseInt(extra42b);

  total41 = parseInt(extras41);
  kms41 = parseInt(Multiplier) * parseInt(kilo2);
  fullTot41 = parseInt(total41) + parseInt(kms41);
  fullTot42 = parseInt(kilo2) + parseInt(extras42);

  $("#usertotal").text('R ' + fullTot41 + '/day');
  $("#userdaily").text('R ' + fullTot42 + '/day');
}
$("#qr1").click(function() {
  displayVals1();
});
$("#qr2").click(function() {
  displayVals2();
});
$('input[name="checkbox3"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox4"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox5"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});
$('input[name="checkbox6"]').click(function() {
  if (($('input[name="checkbox1"]').prop("checked") == true)) {
    displayVals1();
  } else {
    displayVals2();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mySelect">No. Days</label>
<select name="mySelect" id="mySelect">
  <option name="one" value="1">1</option>
  <option name="two" value="2">2</option>
  <option name="three" value="3">3</option>
  <option name="four" value="4">4</option>
  <option name="five" value="5" selected>5</option>
</select><br><br>
<label for="checkbox1">100kms</label>
<input type="radio" name="checkbox1" class="kilo" value="125" id="qr1" checked><br><br>
<label for="checkbox1">200kms</label>
<input type="radio" name="checkbox1" class="kilo" value="225" id="qr2"><br><br>
<label for="checkbox3">Tyre</label>
<input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br>
<label for="checkbox4">Glass</label>
<input type="checkbox" name="checkbox4" value="20" id="qr4"><br><br>
<label for="checkbox5">General</label>
<input type="checkbox" name="checkbox5" value="60" id="qr5" checked><br><br>
<label for="checkbox6">Third Party</label>
<input type="checkbox" name="checkbox6" value="80" id="qr6"><br><br> Daily :<span id="userdaily"> </span><br><br> Total :<span id="usertotal"> </span><br><br>
<input tyep="text" id="pricef1" name="pricef1" value="">
<input tyep="text" id="pricef2" name="pricef2" value="">

【讨论】：