jQuery 检查和更改 Radio (html)答案

【问题标题】：jQuery check and change Radio (html)jQuery 检查和更改 Radio (html)
【发布时间】：2013-01-27 20:10:33
【问题描述】：

我的 HTML

<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>
        <script type="text/javascript" charset="utf-8" src="../../fuctions/jq.js"></script>
    </head>

    <body>
        <div id="topbar">
            <div id="title">
                <!--Title-->After Landing</div>
            <div id="leftnav"> <a href="../../index_aerosoft.html">Home</a>
 <a href="katana_checklist_all.html">Overview</a>
                <!--AllChecklist-->
            </div>
            <div id="rightnav"> <a href="katan_checklist_engineshut-downl.html" id="a_next">Next</a>
            </div>
            <!--NextPage-->
        </div>
        <div id="content">
            <ul class="pageitem">
                <li class="radiobutton" onClick="checkChanges()"> <span class="name">Wing Flaps -<font color="red"> UP
                            </font></span>

                    <input name="1" type="radio"
                    value="other" />
                </li>
                <!--CheckpunktEnd-->
                <li class="radiobutton" onClick="checkChanges()"> <span class="name">Carburetor Heat -<font color="red"> OFF
                            </font></span>

                    <input name="2" type="radio"
                    value="other" />
                </li>
                <!--CheckpunktEnd-->
                <li class="radiobutton" onClick="checkChanges()"> <span class="name">Exterior Lights -<font color="red"> as required
                            </font></span>

                    <input name="3" type="radio"
                    value="other" />
                </li>
                <!--CheckpunktEnd-->
                <li class="radiobutton" onClick="checkChanges()"> <span class="name">Electric Fuel Pump -<font color="red"> OFF
                            </font></span>

                    <input name="4" type="radio"
                    value="other" />
                </li>
                <!--CheckpunktEnd-->
            </ul>
        </div>
        <div id="footer"> <a class="noeffect" href="#" onClick="resetChecklist();">Reset Checklist</a>
            <!--ResetChecklist-->
            <br />
            <br /> <a class="noeffect" href="#" onClick="openxyzDE();">xyz</a>

        </div>
    </body>
</html>

Javascript

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

    font = $('.radiobutton :checked').closest('.radiobutton').find('font')

    if (this.flag) {
        this.checked = false;
    } else {
        font.attr('color', 'green');
    }

    this.flag = !this.flag;
}

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

JSFiddle link

如果有人单击单选按钮，它会被取消选中并且颜色变回红色，但颜色或全部颜色应该只更改未选中的那个人的颜色。

【问题讨论】：

字体标签在 HTML 4.01 中已弃用，将从 HTML5 中删除
那么在html5中怎么处理呢？^^
使用 CSS 设置跨度样式
我使用 span 和 label 修改了你的代码，但是有一个插件可以修改我的东西。您是否在具有其他范围的网站中使用标签/输入？
是的，我使用 iwebkit 框架...

标签： javascript jquery radio-button

【解决方案1】：

这是有效的：http://jsfiddle.net/syTQD/12/

单选按钮应具有正确的名称，例如：name="test[]"

html:

<div id="topbar">
    <div id="title"><!--Title-->
        After Landing
    </div>  
    <div id="leftnav">
        <a href="../../index_aerosoft.html">Home</a>
        <a href="katana_checklist_all.html">Overview</a><!--AllChecklist-->
    </div>
    <div id="rightnav">
        <a href="katan_checklist_engineshut-downl.html"id="a_next">Next</a></div><!--NextPage-->
    </div>
    <div id="content">
        <ul class="pageitem">
            <li class="radiobutton" >
                <span class="name">Wing Flaps -<font color="red"> UP
                </font></span>
                <input name="test[]" type="radio" value="other" />
            </li><!--CheckpunktEnd-->
            <li class="radiobutton">
                <span class="name">Carburetor Heat -<font color="red"> OFF
                </font></span>
                <input name="test[]" type="radio" value="other" />
            </li><!--CheckpunktEnd-->
            <li class="radiobutton" >
                <span class="name">Exterior Lights -<font color="red"> as required
                </font></span>
                <input name="test[]" type="radio" value="other" />
            </li><!--CheckpunktEnd-->
            <li class="radiobutton" >
                <span class="name">Electric Fuel Pump -<font color="red"> OFF
                </font></span>
                <input name="test[]" type="radio" value="other" />
            </li><!--CheckpunktEnd-->
        </ul>
    </div>
    <div id="footer">
        <a class="noeffect" href="#" onClick="resetChecklist();">Reset Checklist</a><!--ResetChecklist-->
        <br /><br />
        <a class="noeffect" href="#" onClick="openxyzDE();">xyz</a>
    </div>

js:

function checkChanges(e) {
    if (!$(e.target).is('input'))
        $(this).find('input').click();

    $('input:radio').each(function() {
        var color = ($(this).is(':checked')) ? 'green' : 'red';
        $(this).parentsUntil('li').parent().find('font').attr('color',color);
    });
}

$('.pageitem .radiobutton').on('click',checkChanges);

【讨论】：

问题是您将单选按钮分组，它们需要在这里像复选框一样工作
更改 html 中的 name 属性
好吧，它失去了 onClick 的“取消选中”选项，请参阅此处jsfiddle.net/j4Wy7