reset/uncheck 复选框如何重置 jquery 中的值？

Question

我正在尝试制作一个包含 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>

Answer 1

我会将 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>

Answer 2

要实现这一点，您可以在所有元素上放置共同的 classes，并使用一个额外的 class 来标识 'family' 选项。从那里您可以检测到选中了哪个复选框。如果勾选'family'，取消勾选其他的并设置multiplier = 3。否则，将 multiplier 设置为等于选中框的数量。

此外，如果您在 CSS.

中将标签设置为 display: block，则无需在标签中手动添加 <br /> 标签

最后，请注意在上面的示例中使用了不显眼的事件处理程序，而不是 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>

Answer 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>

reset/uncheck 复选框如何重置 jquery 中的值？

reset/uncheck checkbox how to reset value in jquery?

javascript

html

jquery

checkbox

selection