重置/取消选中复选框如何重置 jquery 中的值？答案

【问题标题】：reset/uncheck checkbox how to reset value in jquery?重置/取消选中复选框如何重置 jquery 中的值？
【发布时间】：2021-05-21 11:54:18
【问题描述】：

我正在尝试创建一个包含 4 个元素 A B C D（每个值 = 1）和一个元素 E（值 = 3）的清单，以在用户选择此选项时创建“折扣”。该值用作乘数以根据其他选定的标准创建报价。所以我需要将其设为 A+B+C+D=4 但如果我按 E 他们都取消选中并且值变为 3.. 但是.. .

使用该功能，我设法取消选中这些框，但该值似乎不会重置？

function totalIt() {
  var input = document.getElementsByName("type");
  var multiplier = 0;
  
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      multiplier += parseFloat(input[i].value);
    }
  }

  $('#family').on('click', function() {
    $('.font').not(this).removeAttr('checked')
    var multiplier = 3;
  });

  console.log(multiplier)
};

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="scroll.js"></script>
    <style>
      .column2 {
        display: flex;
        flex-wrap: wrap;
      }
      .theForm {
        width: 30%;
      }
    </style>
  </head>
  <!-- BODY  -->
  <body>
    <form action="" class="theForm">
      <fieldset>
        <legend>
          SELECT
        </legend>
        <label><br>
          <input class="font"name="type" value="1" type="checkbox" id="p1" onclick="totalIt()"/>
          Thin
        </label>
        <label><br>
          <input class="font"name="type" value="1" type="checkbox" id="p2" onclick="totalIt()"/>
          Regular
        </label>
        <label><br>
          <input class="font"name="type" value="1" type="checkbox" id="p3" onclick="totalIt()"/>
          Medium
        </label>
        <label><br>
          <input class="font"name="type" value="1" type="checkbox" id="p4" onclick="totalIt()"/>
          Bold
        </label>
        <label><br>
          <input  id="family" name="type" value="3" type="checkbox" id="p5" onclick="totalIt()"/>
          Family
        </label>
      </fieldset>
    </form>
  </body>
</html>

【问题讨论】：

var multiplier = 3; 删除 var - 您正在创建一个新变量而不是更新外部变量
离题：您的 $('#family').on('click' 位于 inside totalIt() 中，因此每次总计时都会获得多个点击处理程序。没有真正的效果，因为它确实将它设置为乘数，但最好保持良好的习惯

标签： javascript html jquery checkbox selection

【解决方案1】：

要实现这一点，您可以在所有元素上放置通用类，并添加一个额外的类来标识“家庭”选项。从那里您可以检测到哪个复选框被选中。如果选中了“family”，则取消选中其他并设置multiplier = 3。否则，将multiplier 设置为复选框的数量。

此外，如果您在 CSS 中将 display: block 设置为 display: block，则无需在标签中手动添加标签。

最后，请注意上面示例中使用了不显眼的事件处理程序，而不是 HTML 中过时的 on 属性。

说了这么多，试试这个：

let $fonts = $('.font').on('change', e => {
  let multiplier = 0;

  if ($(e.target).is('.font-family')) {
    $fonts.not(e.target).prop('checked', false);
    multiplier = 3;
  } else {
    $('.font-family').prop('checked', false);
    multiplier = $('.font:checked').length;
  }

  console.log(multiplier);
});

.column2 {
  display: flex;
  flex-wrap: wrap;
}

.theForm {
  width: 30%;
}

.theForm label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<form action="" class="theForm">
  <fieldset>
    <legend>
      SELECT
    </legend>
    <label>
      <input class="font" name="type" value="1" type="checkbox" />
      Thin
    </label>
    <label>
      <input class="font" name="type" value="1" type="checkbox" />
      Regular
    </label>
    <label>
      <input class="font" name="type" value="1" type="checkbox" />
      Medium
    </label>
    <label>
      <input class="font" name="type" value="1" type="checkbox" />
      Bold
    </label>
    <label>
      <input class="font font-family" name="type" value="3" type="checkbox" />
      Family
    </label>
  </fieldset>
</form>

【讨论】：

【解决方案2】：

我会将E 的点击事件移出您的函数，并像这样：

function totalIt() {

  var input = document.getElementsByName("type");
  var multiplier = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      multiplier += parseFloat(input[i].value);
    }
  }

  console.log(multiplier)
};

$('#family').on('click', function() {
  $('.font').not(this).removeAttr('checked')
  totalIt()
});

演示

我也来自<input id="family" name="type" value="3" type="checkbox" id="p5"/> 的click 事件，因为它会触发 2 次，因为你有$('#family').on('click', function() {

function totalIt() {

  var input = document.getElementsByName("type");
  var multiplier = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      multiplier += parseFloat(input[i].value);
    }
  }

  console.log(multiplier)
};

$('#family').on('click', function() {
  $('.font').not(this).removeAttr('checked')
  totalIt()
});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="description" content="" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="scroll.js"></script>

  <style>
    .column2 {
      display: flex;
      flex-wrap: wrap;
    }
    
    .theForm {
      width: 30%;
    }
  </style>
</head>

<!-- BODY  -->


<body>
  <form action="" class="theForm">
    <fieldset>
      <legend>
        SELECT
      </legend>
      <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p1" onclick="totalIt()"/>
                             Thin
                     </label>
      <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p2" onclick="totalIt()"/>
                             Regular
                     </label>
      <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p3" onclick="totalIt()"/>
                             Medium
                     </label>
      <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p4" onclick="totalIt()"/>
                             Bold
                     </label>
      <label><br>
                             <input  id="family" name="type" value="3" type="checkbox" id="p5"/>
                             Family
                     </label>

    </fieldset>

  </form>






</body>

</html>

【讨论】：

【解决方案3】：

我刚刚整理了你的代码，你的代码有问题请看一下。

 var multiplier = 0;
function totalIt() {
      if($('#family')[0].checked)
        $('#family').removeAttr('checked');
      multiplier = 0;
      var input = document.getElementsByName("type");
      for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
          multiplier += parseFloat(input[i].value);
        }
      }
    console.log(multiplier)

}
$(document).ready(function(){
$('#family').on('click', function() {
    $('.font').not(this).removeAttr('checked');
     multiplier = 3;
      console.log(multiplier)
});
})

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="scroll.js"></script>

    <style>
        .column2{
            display: flex;
            flex-wrap: wrap;

        }
        .theForm{
            width: 30%;}
    </style>
</head>

<!-- BODY  -->


<body>
            <form action="" class="theForm">
             <fieldset>
                     <legend>
                             SELECT 
                     </legend>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p1" onclick="totalIt()"/>
                             Thin
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p2" onclick="totalIt()"/>
                             Regular
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p3" onclick="totalIt()"/>
                             Medium
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p4" onclick="totalIt()"/>
                             Bold
                     </label>
                     <label><br>
                             <input id="family" name="type" value="3" type="checkbox" id="p5"/>
                             Family
                     </label>

             </fieldset>

        </form>




    

</body>

</html>

【讨论】：