通过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）

回答

相关问题