HTML List (Li) change via Javascript onClick

Question

I have a list that looks like that, so the user should check the item one by one and get a feedback the item is checked or not.

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

I want to check via JavaScript whether one of the "li" is checked, if so it should change that line to "green".

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

What have you tried? How about adding a 'click' event handler on the radio buttons? — Adrian
– Adrian, Commented Jan 25, 2013 at 14:27

Eli Gassert · Accepted Answer · 2013-01-25 14:47:33Z

1

If jquery is an option, it becomes pretty simple.

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

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

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

Although I HIGHLY recommend removing the font tag and instead add a class to the li, such as radiobutton-checked which sets the font color to green.

The ab ove code will reset all fonts to red, then find the one radio button with a checked radio inside it, iterate back up to the parent radiobutton (closest) and then find its child font tag and set its color to green. Then anytime a radio button gets clicked, it repeats the above process, thus keeping only the actively checked radio button green.

edited Jan 25, 2013 at 14:47

answered Jan 25, 2013 at 14:29

Eli Gassert

9,7713 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabian Boulegue Over a year ago

jQuery is a Option yes, problem is i need to use the font tag cause the framework require it. How to call your functions?

Eli Gassert Over a year ago

Everything you need is in my answer. checkChanges is the function that should fire anytime a radio button changes. And when the page loads, it will immediately call checkChanges to initialize things, and then anytime a click happens it will automatically call checkChanges again. Everything's there.

Fabian Boulegue Over a year ago

found the problem in your code .attr('color', green); must be .attr('color', 'green');

Collectives™ on Stack Overflow

HTML List (Li) change via Javascript onClick

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related