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

Question

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

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

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

上面的代码片段是我试图用来运行在总数中添加额外的复选框。

Answer 1

根据评论建议 ID 必须是唯一的。您可以使用 prop("checked", true); 选中或不选中复选框，如下所示。你的 fiddle 有错误所以我只删除其他代码并只调用函数。

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

Answer 2

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

地方如

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

应该是

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

Answer 3

对于任何对此主题感兴趣的人，我发现了问题，虽然我的代码可以减少一些，但我设法让我的 fiddle 工作并将 post 它放在这里供任何人查看.错误在 else if ($(($('input[name="checkbox2"]').prop("checked") == true) { 行中，这不一定会执行，因为第一个语句无论如何都会返回 false。无论如何，这就是我的想法。 https://jsfiddle.net/shiataz12/Lo1yek2g/7/。如果更简单的话，我添加了代码片段。

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

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

How to fix: Adding value of checkboxes with different value for first two checkboxes

syntax

checkbox

jquery

add