个人中心
gpt4 book ai didi

javascript - 尝试编写代码来汇总复选框标签文本的美元值(value)

转载 作者：行者123 更新时间：2023-11-27 22:55:49 25 4
gpt4 key购买 nike

这是我的 HTML - 

    <!DOCTYPE html>
 <html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register for Full Stack Conf</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">

    <header>
      <span>Register for</span>
      <h1>Full Stack Conf</h1>
    </header>

    <form action="index.html" method="post">

      <fieldset>         
        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label>Job Role</label>
        <select id="title" name="user_title">
          <option value="full-stack js developer">Full Stack JavaScript       Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>  
        </select>           
      </fieldset>

      <fieldset class="shirt">
        <legend>T-Shirt Info</legend>

        <div>
          <label for="size">Size:</label>
          <select id="size" name="user_size">
            <option value="small">S</option>
            <option value="medium" selected>M</option>
            <option value="large">L</option>
            <option value="extra large">XL</option>
          </select>
        </div>

        <div>
          <label for="design">Design:</label>
          <select id="design" name="user_design">
            <option>Select Theme</option>
            <option value="js puns">Theme - JS Puns</option>
            <option value="heart js">Theme - I &#9829; JS</option>
          </select>
        </div>

        <div id="colors-js-puns" class="">
          <label for="color">Color:</label>
          <select id="color">
            <option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
            <option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option> 
            <option value="gold">Gold (JS Puns shirt only)</option> 
            <option value="tomato">Tomato (I &#9829; JS shirt only)</option>
            <option value="steelblue">Steel Blue (I &#9829; JS shirt only)</option> 
            <option value="dimgrey">Dim Grey (I &#9829; JS shirt only)</option> 
          </select>
        </div>                
      </fieldset>

      <fieldset class="activities">
        <legend>Register for Activities</legend>
        <label><input type="checkbox" name="all"> Main Conference — $200</label>
        <label><input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
        <label><input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>          
        <label><input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100</label>

      </fieldset>
      <fieldset>
        <legend>Payment Info</legend>

        <label for="payment">I'm going to pay with:</label>
        <select id="payment" name="user_payment">
          <option value="select_method">Select Payment Method</option>
          <option value="credit card">Credit Card</option>
          <option value="paypal">PayPal</option>
          <option value="bitcoin">Bitcoin</option>
        </select>

        <div id="credit-card" class="credit-card">

          <div class="col-6 col">
            <label for="cc-num">Card Number:</label>
              <input id="cc-num" name="user_cc-num" type="text">
          </div>

          <div class="col-3 col">
            <label for="zip">Zip Code:</label>
            <input id="zip" name="user_zip" type="text"> 
          </div>

          <div class="col-3 col">
            <label for="cvv">CVV:</label>
            <input id="cvv" name="user_cvv" type="text"> 
          </div>

          <label>Expiration Date:</label>
          <select id="exp-month" name="user_exp-month">
            <option value="1">1 - January</option>
            <option value="2">2 - February</option>
            <option value="3">3 - March</option>
            <option value="4">4 - April</option>
            <option value="5">5 - May</option>
            <option value="6">6 - June</option>
            <option value="7">7 - July</option>
            <option value="8">8 - August</option>
            <option value="9">9 - September</option>
            <option value="10">10 - October</option>
            <option value="11">11 - November</option>   
            <option value="12">12 - December</option>                         
          </select>  
          <select id="exp-year" name="user_exp-year">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>                        
          </select>                                  
        </div>

        <div>
            <p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click “Register” below.</p>
        </div> 

        <div>
            <p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p>
        </div>                  

      </fieldset>        

      <button type="submit">Register</button>

    </form>

    </div>
</body>
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>
</html>

“事件”类列出了事件及其美元值(value)。我已经尝试创建一个总美元变量，并在检查输入名称后 += 为该变量添加多少 $，但我是基于“is :checked inside an on change function that apply to the整个列表，所以如果有东西检查并且您检查了其他内容，它会重新添加已经检查的第一个内容的货币值(value)，因此，如果检查了第一个类别，它会显示 100，然后您单击另一个类别，它会变为 300 ，再次添加第一个类别。 p>

这是我的jquery

$(document).ready(function() {
//append the total dollars display under activities and hide it until clicked
var $TotalDollars = 0;
var $TotalDollarsDisplay = $('<div></div>');
$('.activities').append($TotalDollarsDisplay);
$($TotalDollarsDisplay).hide();
//checkbox needs to show unique dates and times and disable duplicates
$(".activities").find("input:checkbox").change(function() {
//variables for activity input names
    var $jsFrameworks = $("input[name='js-frameworks']");
    var $Express = $("input[name='express']");
    var $jsLibs = $("input[name='js-libs']");
    var $Node = $("input[name='node']");
    var $MainConf = $("input[name='all']");
    var $Npm = $("input[name='npm']");
    var $BuildTools = $("input[name='build-tools']");
    var $CheckedActivities = $(".activities").find('input:checkbox:checked').length;
    console.log($CheckedActivities);
//Disable duplicate times scheduled
        if (($jsFrameworks).is(':checked')) {
            ($Express).prop('disabled', true);
        } else  {
            ($Express).prop('disabled', false);
        } 
        if (($Express).is(':checked')) { 
            ($jsFrameworks).prop('disabled', true);
        } else {
            ($jsFrameworks).prop('disabled', false);
        }
        if (($jsLibs).is(':checked')) {
            ($Node).prop('disabled', true);
        } else  {
            ($Node).prop('disabled', false);
        } 

        if (($Node).is(':checked')) { 
            ($jsLibs).prop('disabled', true);
        } else {
            ($jsLibs).prop('disabled', false);
        }
//add up the total dollars for each activity
    //Adding the non duplicate workshops to the total
    });

});

有人可以告诉我如何执行此操作吗？如果至少选中一个，则总数仅显示在复选框下方。

最佳答案

这不是很漂亮，但是根据你所拥有的，你可以使用 jquery 和一些数组函数来计算总数

$(".activities input:checkbox:checked")

  // Get the text from the parent
  .map(function(idx, el) {
      return $(el).parent().text();
  })

  // convert the jquery object to an array
  .toArray()

  // extract the value from the string using regex
  .map(function(item) {
      var match = item.match(/\$(\d+)/);
      return parseInt(match[1]);
  })

  // calculate the total with reduce
  .reduce(function(cur, next) {
      return cur + next;
  });

示例在这里:https://jsbin.com/gaposeyoja/edit?js,output

关于javascript - 尝试编写代码来汇总复选框标签文本的美元值(value)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37626084/

25 4 0
文章推荐： javascript - 在 Chrome Kiosk 模式下禁用/自定义与触摸相关的输入 UI
文章推荐： javascript - Chrome 扩展开发 Instagram 加载事件
文章推荐： javascript - 如何在一页中加载两个 Google 折线图？
文章推荐： javascript - three.js CSS3DRenderer如何控制字体大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com