選中/取消選中復選框時切換文本

Question

我正在玩的代碼是...

<!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>

選中復選框后，我希望文本在剛單擊的行中的復選框的“從計算中刪除：”和“添加到計算：”之間切換。

有關如何執行此操作的任何想法？ 謝謝！

Answer 1

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

請查看以下內容，問題是兩次使用相同的ID。 它會搶先使用它。 因此，我將ID add_remove更改為add_remove_1和add_remove_2。 然后修改js以使用呼叫者ID找出要引用的對象。

<!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>

選中/取消選中復選框時切換文本

問題描述

1 個解決方案

解決方案1
1 2012-07-11 14:59:03

選中/取消選中復選框時切換文本

問題描述

1 個解決方案

解決方案1 1 2012-07-11 14:59:03

解決方案1
1 2012-07-11 14:59:03