jQuery 检查道具。的 Radio 并取消选中 onClick 并检查颜色答案

【问题标题】：jQuery check prop. of Radio and uncheck onClick and check colourjQuery 检查道具。的 Radio 并取消选中 onClick 并检查颜色
【发布时间】：2013-01-27 07:59:03
【问题描述】：

这里是代码

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

我得到了一个检查“无线电被检查并改变颜色”的功能

function checkChanges()
{

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

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

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

我想在该代码中添加一个函数，如果选中并再次单击 Radio（onClick），则取消选中 Radio，这也应该将颜色改回红色。

这是代码的 JSFiddle :)！ http://www.jsfiddle.net/syTQD

【问题讨论】：

jQuery check prop. of Radio and uncheck onClick的可能重复

标签： javascript jquery radio-button

【解决方案1】：

这可能对你有帮助

function checkChanges() {
    // remove this line $('.radiobutton font').attr('color', 'red');
    font = $(this).closest('.radiobutton').find('font')

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

    this.flag = !this.flag;
}

【讨论】：

@FabianBoulegue 只是好奇，如果你想要复选框的行为，为什么要使用单选按钮？
@FaisalSayed 这是因为我使用该框架并且需要此处的单选按钮样式snippetspace.com