Javascript 更改复选框列表项样式
我在ASP.NET中有一个带有复选框列表的应用程序:Javascript 更改复选框列表项样式,javascript,css,asp.net,Javascript,Css,Asp.net,我在ASP.NET中有一个带有复选框列表的应用程序: <asp:CheckBoxList runat="server" ID="myCheckBoxList"> <asp:ListItem Text="1 16" /> <asp:ListItem Text="1 17" /> <asp:ListItem Text="2 20" /> </asp:CheckBoxList> 我想在单击按钮后更改选定图元的样式
<asp:CheckBoxList runat="server" ID="myCheckBoxList">
<asp:ListItem Text="1 16" />
<asp:ListItem Text="1 17" />
<asp:ListItem Text="2 20" />
</asp:CheckBoxList>
我想在单击按钮后更改选定图元的样式。为此,我有JavaScript功能:
function changeColor() {
var checkBoxList = document.getElementById("myCheckBoxList");
var options = checkBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
console.log(options[i].checked);
if (options[i].checked) {
options[i].parentElement.className = 'Red';
}
}
}
函数changeColor(){
var checkBoxList=document.getElementById(“myCheckBoxList”);
var options=checkBoxList.getElementsByTagName('input');
对于(变量i=0;i
当我单击按钮时,所选项目会在很短的时间内(大约0.5秒)更改其颜色,然后恢复为默认的黑色。为什么我的复选框列表项样式重置?我不要这种行为。如何更改代码以永久更改颜色(而不仅仅是0.5秒)?以下是完整的解决方案:
<script type="text/javascript">
function changeColor() {
var checkBoxList = $('[id$="myCheckBoxList"]');
var options = checkBoxList[0].getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
console.log(options[i].checked);
if (options[i].checked) {
options[i].parentElement.className = 'Red';
}
}
return false;
}
</script>
<asp:CheckBoxList runat="server" ID="myCheckBoxList">
<asp:ListItem Text="1 16" />
<asp:ListItem Text="1 17" />
<asp:ListItem Text="2 20" />
</asp:CheckBoxList>
<asp:Button OnClientClick="return changeColor();" Text="Test" runat="server" />
函数changeColor(){
var checkBoxList=$('[id$=“myCheckBoxList”]');
var options=复选框列表[0]。getElementsByTagName('input');
对于(变量i=0;i
我已经使用jQuery对我的复选框列表进行了本地化,因为如果使用母版页,它在浏览器中可以有不同的Id。其次,我从函数中返回false,以防止在按钮单击时回发,以保持类值。您永久更改了类名,请检查您是否有回发,或者您的复选框列表项是否已重新创建谢谢。它工作得很好。我可能是无意中发回的。当然应该有选项[i].parentElement.style.color='Red'-我的错误