當複選框被選中切換文本/選中

我與是玩弄代碼...當複選框被選中切換文本/選中

<!DOCTYPE html> 

<html> 
<body> 

<script> 
function changeCell(td) 
{ 
var node = td; 
while ((node = node.parentNode) != null) 
{ 
if (node.tagName == "TD") 
{ 
node.style.backgroundColor = td.checked ? "red" : "white"; 
return; 
} 
} 
// not found...give up? 
} 
</script> 


<style> 
td { background-color: white; } 
</style> 

<form name="gradebook"> 
<table> 
    <tr> 
     <td><span id="add_remove">Remove from Calculation:</span></td> <td><input id="pts_earned_1" onclick="changeCell(this);clickCh(this);clickCh_total_pts(this.form.total_pts_1);this.form.total_pts_1.checked = this.checked;" type="checkbox" value="10"> 10/<span style="display: none"><input id="total_pts_1" type="checkbox" onclick="clickCh_total_pts(this);" value="12"></span> 12<br> </td> 
    </tr> 
    <tr> 
     <td><span id="add_remove">Remove from Calculation:</span></td> <td><input id="pts_earned_2" onclick="changeCell(this);clickCh(this);clickCh_total_pts(this.form.total_pts_2);this.form.total_pts_2.checked = this.checked;" type="checkbox" value="12.5"> 12.5/<span style="display: none"><input id="total_pts_2" type="checkbox" onclick="clickCh_total_pts(this);" value="14"></span> 14<br></td> 
    </tr> 
</table> 
<br> 
<input id="pts_earned_total" type="hidden" value="22.5"> 
<input id="total_pts" type="hidden" value="26"> 
<div id="pts_earned_display">Pts. Earned: echo the initial pts. earned</div> 
<div id="total_pts_display">Total Pts.: echo the initial total pts.</div> 
<div id="percentage">Overall Percentage.: echo the initial percent</div> 
</form> 

<script type="text/javascript"> 
function clickCh(caller) { 

    var pts_earned = document.getElementById("pts_earned_total").value*1; 
    if(caller.checked){ pts_earned -= caller.value*1; } 
       else { pts_earned += caller.value*1; } 
    document.getElementById('pts_earned_total').value = pts_earned; 
    document.getElementById('pts_earned_display').innerHTML = 'Pts. Earned: '+pts_earned.toFixed(2); 
} 


function clickCh_total_pts(caller) { 

    var pts_earned = document.getElementById("pts_earned_total").value*1; 
    var total_pts = document.getElementById("total_pts").value*1; 
    if(caller.checked){ total_pts += caller.value*1; 
         document.getElementById('add_remove').innerHTML = 'Remove from Calculation:'; 
        } 
       else { total_pts -= caller.value*1; 
         document.getElementById('add_remove').innerHTML = 'Add to Calculation:'; 
        } 
    document.getElementById('total_pts').value = total_pts; 
    document.getElementById('total_pts_display').innerHTML = 'Total Pts.: '+total_pts.toFixed(2); 
    document.getElementById('percentage').innerHTML = 'Overall Percentage: '+Math.round((pts_earned/total_pts)*100*10)/10+'%'; 
} 

</script> 
</body> 
</html>

當複選框被選中，我希望文字之間的「從計算中刪除：」切換和「剛剛點擊的行中的複選框」添加到計算：「。

有關如何做到這一點的任何想法？謝謝！

來源

2012-07-11 user1518164

在複選框上嘗試使用onchange而不是onclick。

看看下面，問題是使用相同的id兩次。它會搶先使用它。所以我將id add_remove改爲add_remove_1和add_remove_2。然後修改js以使用調用者標識來確定要引用哪一個。

<!DOCTYPE html> 

<html> 
<body> 

<script> 
    function changeCell(td) { 
     var node = td; 
     while ((node = node.parentNode) != null) { 
      if (node.tagName == "TD") { 
       node.style.backgroundColor = td.checked ? "red" : "white"; 
       return; 
      } 
     } 
     // not found...give up? 
    } 
</script> 


<style> 
td { background-color: white; } 
</style> 

<form name="gradebook"> 
<table> 
    <tr> 
     <td><span id="add_remove_1">Remove from Calculation:</span></td> <td><input id="pts_earned_1" onclick="changeCell(this);clickCh(this);clickCh_total_pts(this.form.total_pts_1);this.form.total_pts_1.checked = this.checked;" type="checkbox" value="10"> 10/<span style="display: none"><input id="total_pts_1" type="checkbox" onchange="clickCh_total_pts(this);" value="12"></span> 12<br> </td> 
    </tr> 
    <tr> 
     <td><span id="add_remove_2">Remove from Calculation:</span></td> <td><input id="pts_earned_2" onclick="changeCell(this);clickCh(this);clickCh_total_pts(this.form.total_pts_2);this.form.total_pts_2.checked = this.checked;" type="checkbox" value="12.5"> 12.5/<span style="display: none"><input id="total_pts_2" type="checkbox" onchange="clickCh_total_pts(this);" value="14"></span> 14<br></td> 
    </tr> 
</table> 
<br> 
<input id="pts_earned_total" type="hidden" value="22.5"> 
<input id="total_pts" type="hidden" value="26"> 
<div id="pts_earned_display">Pts. Earned: echo the initial pts. earned</div> 
<div id="total_pts_display">Total Pts.: echo the initial total pts.</div> 
<div id="percentage">Overall Percentage.: echo the initial percent</div> 
</form> 

<script type="text/javascript"> 
    function clickCh(caller) { 

     var pts_earned = document.getElementById("pts_earned_total").value * 1; 
     if (caller.checked) { pts_earned -= caller.value * 1; } 
     else { pts_earned += caller.value * 1; } 
     document.getElementById('pts_earned_total').value = pts_earned; 
     document.getElementById('pts_earned_display').innerHTML = 'Pts. Earned: ' + pts_earned.toFixed(2); 
    } 


    function clickCh_total_pts(caller) { 
     var addRemoveId = caller.id.replace("total_pts", "add_remove"); 

     var pts_earned = document.getElementById("pts_earned_total").value * 1; 
     var total_pts = document.getElementById("total_pts").value * 1; 
     if (caller.checked) { 
      total_pts += caller.value * 1; 
      document.getElementById(addRemoveId).innerHTML = 'Remove from Calculation:'; 
     } else { 
      total_pts -= caller.value * 1; 
      document.getElementById(addRemoveId).innerHTML = 'Add to Calculation:'; 
     } 
     document.getElementById('total_pts').value = total_pts; 
     document.getElementById('total_pts_display').innerHTML = 'Total Pts.: ' + total_pts.toFixed(2); 
     document.getElementById('percentage').innerHTML = 'Overall Percentage: ' + Math.round((pts_earned/total_pts) * 100 * 10)/10 + '%'; 
    } 

</script> 
</body>

來源

2012-07-11 14:59:03 amsprich

只是改變爲「onchange」沒有奏效。不能以某種方式使用「這個」？ – user1518164 2012-07-12 04:20:55

我編輯了我的答案。 – amsprich 2012-07-12 14:24:23

當複選框被選中切換文本/選中

回答

相關問題