我一直试图在数组中的其他复选框(例如费用)中总结动态勾选的复选框(例如“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>
答案 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