gpt4 book ai didi

javascript - jQuery 检查和更改 Radio (html)

转载 作者:行者123 更新时间:2023-11-28 09:24:48 24 4
gpt4 key购买 nike

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

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

最佳答案

这就是有效的: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);

关于javascript - jQuery 检查和更改 Radio (html),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14546609/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com