微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

重置/取消选中复选框如何在 jquery 中重置值？

分类：编程问答

如何解决重置/取消选中复选框如何在 jquery 中重置值？

我正在尝试使用包含 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>

解决方法

我会将 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()
});

演示

我还从您的 click 事件中获得了 <input id="family" name="type" value="3" type="checkbox" id="p5"/>，因为它会触发 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>

,

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

此外，如果您在 CSS 中将 <br /> 标签设置为 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>

,

我刚刚整理了您的代码，您的代码也有问题，请查看。

 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot