通過Javascript onClick更改HTML列表（Li）

我有一個看起來像這樣的列表，所以用戶應該逐個檢查項目並獲得項目檢查與否的反饋。通過Javascript onClick更改HTML列表（Li）

<html> 
<head> 
    <link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" /> 
    <script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script> 
</head> 
<body> 
    <div id="topbar"> 
     <div id="title"> 
      Engine Run-up 
     </div> 
     <div id="leftnav"> 
      <a href="../../index_aerosoft.html">Home</a> 
      <a href="katana_checklist_all.html">Overview</a> 
     </div> 
     <div id="rightnav"> 
      <a href="katan_checklist_takeoff.html"id="a_next">Next</a> 
     </div> 
    </div> 
    <div id="content"> 
     <ul class="pageitem"> 
      <li class="radiobutton"> 
       <span class="name">Toe Brakes -<font color="red"> hold</font></span> 
       <input name="1" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Safety Belts -<font color="red"> fastened</font></span> 
       <input name="2" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Canopy -<font color="red"> closed/locked</font></span> 
       <input name="3" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Pressure Warning Light -<font color="red"> OFF</font></span> 
       <input name="4" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Shut-off Valve -<font color="red"> check OPEN</font></span> 
       <input name="5" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Fuel Quantity Indicator -<font color="red"> check</font></span> 
       <input name="6" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Engine Gauges -<font color="red"> green range</font></span> 
       <input name="7" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Trim -<font color="red"> NEUTRAL</font></span> 
       <input name="8" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Controls -<font color="red"> free</font></span> 
       <input name="9" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> 1700-1800 RPM</font></span> 
       <input name="10" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Prop Control Level -<font color="red"> Cycle 3 x (50-250 RPM)</font></span> 
       <input name="11" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Ignition Switch - Cycle -<font color="red"> L-BOTH-R-BOTH</font></span> 
       <input name="12" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> 1500 RPM</font></span> 
       <input name="13" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Carburetor Heat -<font color="red"> ON (<50 RPM)</font></span> 
        <input name="14" type="radio" value="other" /> 
        </li> 
      <li class="radiobutton"> 
       <span class="name">Throttle -<font color="red"> IDLE</font></span> 
       <input name="15" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Carniretor Heat -<font color="red"> OFF</font></span> 
       <input name="16" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Corcuit Breakers -<font color="red"> check IN</font></span> 
       <input name="17" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Electric Fuel Pump -<font color="red"> ON</font></span> 
       <input name="18" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Wing Flaps -<font color="red"> T/O</font></span> 
       <input name="19" type="radio" value="other" /> 
      </li> 
      <li class="radiobutton"> 
       <span class="name">Parking Brake -<font color="red"> release</font></span> 
       <input name="20" type="radio" value="other" /> 
      </li> 
     </ul> 
    </div> 
    <div id="footer"> 
     <a class="noeffect" href="#" onClick="resetChecklist();">Reset ZYX</a> 
     <br /><br /> 
     <a class="noeffect" href="#" onClick="openXYZDE();">XYZ</a> 
    </div> 
</body>

我想通過JavaScript來檢查的「禮」的一個是否被選中，如果是的話，應該改變該行的「綠色」。

<li class="radiobutton"> 
    <span class="name">Toe Brakes -<font color="green"> hold</font></span> 
    <input name="1" type="radio" value="other" /> 
</li>

來源

2013-01-25 Fabian Boulegue

你有什麼試過？如何在單選按鈕上添加「點擊」事件處理程序？ – Adrian

如果jquery是一個選項，它變得非常簡單。

function checkChanges() 
{ 
    $('.radiobutton font').attr('color', 'red'); 

    $('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green'); 
} 

$(function() 
{ 
    checkChanges(); 
    $('.radiobutton :radio').on('click', checkChanges); 
});

雖然我強烈建議刪除字體標籤，而是添加一個類鋰，如radiobutton-checked其設置字體顏色爲綠色。

其他代碼會將所有字體重置爲紅色，然後在其中找到一個帶有選中無線電的單選按鈕，迭代回到父級單選按鈕（closest），然後找到其子字體標籤並將其顏色設置爲綠色。然後隨時點擊一個單選按鈕，它會重複上述過程，從而只保留主動選中的單選按鈕綠色。

來源

2013-01-25 14:29:53

jQuery是一個選項是的，問題是我需要使用字體標籤導致框架需要它。如何調用你的函數？ –

你需要的一切都在我的答案中。 checkChanges是在單選按鈕更改時應該觸發的函數。當頁面加載時，它會立即調用checkChanges來初始化事件，然後在發生點擊時它會自動再次調用checkChanges。一切都在那裏。 –

在您的代碼中發現問題.attr（'color'，green）;必須是.attr（'color'，'green'）; –

通過Javascript onClick更改HTML列表（Li）

回答

相關問題