如何使用javascript将禁用复选框和数组复选框的值相加

时间:2016-08-28 02:41:51

标签: javascript html arrays

我一直试图在数组中的其他复选框(例如费用)中总结动态勾选的复选框(例如“uniform”,“educfees”,schoolFees)的值。但似乎很难(可能是因为我禁用了一些复选框,这是必要的)。

这是html:

    <p>Child's Gender:<br>
    <input type="checkbox" name="gender[]" id="male"  value="male"  ><label>Male</label><br>
    <input type="checkbox" name="gender[]" id="female"  value="female"  ><label>Female</label><br>

    <p>Child's Class:<br>
    <select required name="childClass" id="childClass">
    <option value="0" >Select...</option>
    <option value="prenursery">Pre Nursery</option>
    <option value="nursery">Nursery</option>
    <option value="reception">Reception</option>
    <option value="year1">Year One</option>
    <option value="year2">Year Two</option>
    <option value="year3">Year Three</option>
    <option value="year4">Year Four</option>
    <option value="year5">Year Five</option>
    <option value="year6">Year Six</option>
    </select>

    <p>
    <h2>Fees</h2>
    <p>Cost of Uniform: <br>
    <input type="checkbox" name="uniform[]" id="uniform24"  value="24300.00"  required disabled><label>Uniform Fee N24,300</label><br>
    <input type="checkbox" name="uniform[]" id="uniform26"  value="26300.00"  required disabled><label>Uniform Fee N26,300</label><br>  
    <p>School Fees: <br>
    <input type="checkbox" name="schoolFees" id="schoolFees5" value="145000.00"  required disabled><label>School Fees N145,000</label><br>
    <input type="checkbox" name="schoolFees" id="schoolFees7"   value="147000.00"  required disabled><label>School Fees N147,000</label><br>
    <input type="checkbox" name="schoolFees" id="schoolFees9"   value="149000.00"  required disabled><label>School Fees N149,000</label><br>
    <p>Educational Resources Fees (Including books and other materials): <br>
    <input type="checkbox" name="educFees" id="educFees15"   value="15000.00"  required disabled><label>Fees N15,000</label><br>
    <input type="checkbox" name="educFees" id="educFees20"   value="20000.00"  required disabled><label>Fees N20,000</label><br>

    <br> <label class="head"><strong>Select Your fees Options</strong></label><br/>

    <input type="checkbox" name="fee"   value="10000.00"  onclick="calculate()"  required><label>Acceptance Fee N10,000.00</label><br>
    <input type="checkbox" name="fee"   value="10000.00"  onclick="calculate()"  required><label>Development Fee N10,000.00</label><br>
    <input type="checkbox" name="fee"   value="12000.00" onclick="calculate()"   required><label>PTA and Excursion and Magazine Fee N12,000.00</label><br>
    <input type="checkbox" name="fee"   value="3000.00"  onclick="calculate()"  required><label>Folder Fee N3,000.00</label><br>
    <input type="checkbox" name="fee"   value="15000.00" onclick="calculate()"    ><label>Extra Lesson <b>(optional)</b> N15,000.00</label><br>
    <input type="checkbox" name="fee"  value="15000.00"  onclick="calculate()"  ><label>Club <b>(optional)</b> N15,000.00</label><br>
    <!--total fee is here-->   
    <p><b>Total Fee:        
    <input  name="amt" id="amt" class="form-control number" type="text" /> <br>

这是我的Javascript:

<script type="text/javascript">

    function eId(id){
    return document.getElementById(id);
    }
    function eClass(id){
    return document.getElementsByClassName(id);
    }

    function addEventHandler(element, event, functionHandler, bubbleCaptures){
    if (element.attachEvent) {
    element.attachEvent("on" + event, functionHandler);
    //console.log(element+" "+event+" "+functionHandler);
    } else {
    element.addEventListener(event, functionHandler, bubbleCaptures);
    //console.log(element+" "+event+" "+functionHandler);
    }
    }

    function calc(){
    var m = document.getElementById("male");
    var f    = document.getElementById("female");

    if (m.checked){
    document.getElementById('uniform24').checked=true;
    document.getElementById('uniform26').checked=false;
    f.disabled = true;
    }
    else if(f.checked){
    document.getElementById('uniform24').checked=false;
    document.getElementById('uniform26').checked=true;
    m.disabled = true;
    }
    else {
    document.getElementById('uniform24').checked=false;
    document.getElementById('uniform26').checked=false;
    m.disabled = false;
    f.disabled = false;
    }   
    }


    addEventHandler(eId("male"), "click", calc, false);
    addEventHandler(eId("female"), "click", calc, false);
    addEventHandler(eId("childClass"), "click", childClassX, false);
    addEventHandler(eId("fee"), "click", updateFee, false);

    function childClassX(){
    //childClassX(this.id, 'schoolFees', 'gender', 'uniform', 'educFees')
    var u1 = s3;
    var u2 = s4;
    var s1 = document.getElementById("childClass");
    var s2 = document.getElementById("schoolFees");
    var s3 = document.getElementsByName("gender");
    var s4 = document.getElementById("uniform");
    var s5 = document.getElementById("educFees");

    if (s1.value == "prenursery"){
    document.getElementById('schoolFees5').checked=true;
    document.getElementById('schoolFees7').checked=false;
    document.getElementById('schoolFees9').checked=false;

    }

    else if (s1.value == "0"){
    document.getElementById('schoolFees5').checked=false;
    document.getElementById('schoolFees7').checked=false;
    document.getElementById('schoolFees9').checked=false;

    }
    else if (s1.value == "nursery"){
    document.getElementById('schoolFees5').checked=true;
    document.getElementById('schoolFees7').checked=false;
    document.getElementById('schoolFees9').checked=false;

    }
    else  if (s1.value == "reception"){
    document.getElementById('schoolFees5').checked=false;
    document.getElementById('schoolFees7').checked=true;
    document.getElementById('schoolFees9').checked=false;

    }
    else {
    document.getElementById('schoolFees5').checked=false;
    document.getElementById('schoolFees7').checked=false;
    document.getElementById('schoolFees9').checked=true;
    }

    //-------------for educational fees

    if(s1.value == "0"){
    document.getElementById('educFees15').checked=false;
    document.getElementById('educFees20').checked=false;
    } 
    else  if(s1.value == "prenursery" ||  s1.value == "nursery" || s1.value == "reception" ){
    document.getElementById('educFees15').checked=true;
    document.getElementById('educFees20').checked=false;
    }
    else  {
    document.getElementById('educFees15').checked=false;
    document.getElementById('educFees20').checked=true;
    }

    //----------for gender selection to determine uniform

    if (s3.value == "female" &&  s1.value == "nursery" || s1.value == "prenursery" || s1.value == "reception"
    || s1.value == "year1" || s1.value == "year2" || s1.value == "year3" || s1.value == "year4"){
    document.getElementById('uniform24').checked=false;
    document.getElementById('uniform26').checked=true;
    }
    else {
    document.getElementById('uniform24').checked=true;
    document.getElementById('uniform26').checked=false;
    }
    }
    function calculate() {      
    var el, i = 0;
    var amount = 0;
    while(el = document.getElementsByName("fee")[i++]) {
    if(el.checked) { amount= amount + Number(el.value);}
    }
    document.getElementById("amt").value = amount;
    }
    </script>

1 个答案:

答案 0 :(得分:1)

您必须检查disabled属性是否为true:.attr('disabled')

你可以遍历这样的属性然后我们可以通过$("input[type='checkbox']").val();

获取输入的值

你能从这里拿走吗?

对于纯JS,我们可以选中如下所示的复选框

 document.getElementById("check1").checked = true;

 document.getElementById("check1").checked = false;

接下来让if条件循环遍历所有选项。如果option.checked值为false,则创建变量sum,这将添加document.getElementById(whatever here).value