Question

很抱歉，我正在尝试学习JS，因为我试图合并所选复选框项目的总和以及单选按钮选择中项目的总和。我的JS只是一次尝试，但我没有到达任何地方。

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Order CDs</title>
</head>
<body>

<script type = "text/javascript">

function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}

$(document).ready(function(){
    $('#termsChkbx').change(function(){
        if($(this).is(':checked'))
        {
            $(this).parent('p').css('color','black');
        }
        else
        {
             $(this).parent('p').css('color','red');
        }
    });  

$(document).on("click",".chosen",function() {
        var sum=0;
    var chk=$(this).find("input");
    if(chk.is(':checked')) {
        sum = sum + parseInt(chk.val());
    } else {
        sum = sum - parseInt(chk.val());
    }
    $('#total').val(sum);
}); 

});

</script>


<div id="wrapper">
    <h1>Buy CDs</h1>

    <form id="orderForm" action="#" method="get">
        <section id="selectCD">
            <h2>Select CDs</h2>
<?php
include_once('database_conn.php');
$sqlCDs = 'SELECT CDID, CDTitle, CDYear, catDesc, CDPrice FROM nmc_cd b inner join nmc_category c on b.catID = c.catID WHERE 1 order by CDTitle';
$rsCDs = mysqli_query($conn, $sqlCDs);
while ($CD = mysqli_fetch_assoc($rsCDs)) {
    echo "\t<div class='item'>
            <span class='CDTitle'>{$CD['CDTitle']}</span>
            <span class='CDYear'>{$CD['CDYear']}</span>
            <span class='catDesc'>{$CD['catDesc']}</span>
            <span class='CDPrice'>{$CD['CDPrice']}</span>
            <span class='chosen'><input type='checkbox' name='CD[]' value='{$CD['CDID']}' title='{$CD['CDPrice']}' /></span>
        </div>\n";
}
?>
        </section>

        <section id="collection">
            <h2>Collection method</h2>
            <p>Please select whether you want your chosen CD(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
            <p>
            Home address - &pound;4.99 <input type="radio" name="deliveryType" value="home" title="4.99" checked = "checked" />&nbsp; | &nbsp;
            Collect from warehouse - no charge <input type="radio" name="deliveryType" value="trade" title="0" />
            </p>
        </section>

        <section id="checkCost">
            <h2>Total cost</h2>
            Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
        </section>

        <section id="placeOrder">
            <h2>Place order</h2>
            Your details
            Customer Type: <select name="customerType">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

            <p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>


            <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
        </section>
    </form>
</div>
</body>
</html>

Answer 1

$('.chosen')不是复选框。复选框是.chosen

的子项

试试这个

$('.chosen').on("click",function() {
    var chk=$(this).find("input");
    if(chk.is(':checked')) {
        sum = sum + parseInt(chk.val());
    } else {
        sum = sum - parseInt(chk.val());
    }
    $('#total').val(sum);
});

的 JSFIDDLE

javascript总和函数

1 个答案: