首先,很抱歉这个含糊的问题,我不知道如何用语言表达。我的问题最好用一个例子来说明。
我正在使用一个带有多个复选框的引导下拉菜单。我使用了一个 css 技巧来改变它们的外观,使用一些漂亮的 FontAwesome 图标。但是,当我尝试使用 jQuery 对这些复选框的状态执行某些操作时,第一次选中/取消选中似乎有效,但任何后续切换(选中/取消选中)都不起作用...
$('.js-inputhit').click(function() {
if (this === event.target) {
$(this).find(':input').click();
}
});
$('.js-inputhit :input').click(function(e) {
e.stopPropagation();
});
$('.selectchat_all').click(function() {
$('.selectchat_active').attr('checked', false);
$('#chat1, #chat2, #chat3, #chat4').attr('checked', true);
});
$('.selectchat_active').click(function() {
$('.selectchat_all').attr('checked', false);
$('#chat1, #chat2, #chat3, #chat4').attr('checked', false);
});
/*Adding custom checkbox icons*/
label {
position: relative;
padding-left: 20px;
cursor: pointer;
}
label:before,
label:after {
font-family: FontAwesome;
font-size: 14px;
/*absolutely positioned*/
position: absolute;
top: 0;
left: 0;
}
label:before {
content: '\f096';
/*unchecked*/
}
label:after {
content: '\f046';
/*checked*/
/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
/*CSS3 transitions for animated effect*/
transition: all 0.35s;
}
/*hiding the original checkboxes*/
input[type="checkbox"] {
display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"]:checked + label:after {
max-width: 25px;
/*an arbitratry number more than the icon's width*/
opacity: 1;
/*for fade in effect*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="checkbox" name="chat1" id="chat1" checked/>
<label for="chat1" style="font-weight: normal; margin-bottom: 0px;">DreamhackCS</label>
<br>
<input type="checkbox" name="chat2" id="chat2" />
<label for="chat2" style="font-weight: normal; margin-bottom: 0px;">IzakOOO</label>
<br>
<input type="checkbox" name="chat3" id="chat3" />
<label for="chat3" style="font-weight: normal; margin-bottom: 0px;">Nightblue3</label>
<br>
<input type="checkbox" name="chat4" id="chat4" />
<label for="chat4" style="font-weight: normal; margin-bottom: 0px;">imaqtpie</label>
<br><br>
<input type="checkbox" name="active" class="selectchat_active" id="active" />
<label for="active" style="font-weight: normal; margin-bottom: 0px;">Check none</label>
<br>
<input type="checkbox" name="all" class="selectchat_all" id="all"/>
<label for="all" style="font-weight: normal; margin-bottom: 0px;">Check all</label>
这个例子中的问题: 单击“全部检查”检查所有 4 个 channel 。单击“全部不勾选”将取消选中所有这些。 (到目前为止,一切都很好)。但是,在那之后,“全部检查”不再起作用。它不再检查 4 个 channel 。 “不选中”仍然会取消选中所有这些(如果您手动选中它们),但是“全部选中”不再有效...
谁能找到我的问题:)?非常感谢您的帮助。
最佳答案
使用 .prop() 代替 .attr()
attr() 只更新实际的 DOM 树
有关详细信息,请参阅 http://api.jquery.com/prop/或 this answer
$('.js-inputhit').click(function() {
if (this === event.target) {
$(this).find(':input').click();
}
});
$('.js-inputhit :input').click(function(e) {
e.stopPropagation();
});
$('.selectchat_all').click(function() {
$('.selectchat_active').prop('checked', false);
$('#chat1, #chat2, #chat3, #chat4').prop('checked', true);
});
$('.selectchat_active').click(function() {
$('.selectchat_all').prop('checked', false);
$('#chat1, #chat2, #chat3, #chat4').prop('checked', false);
});
/*Adding custom checkbox icons*/
label {
position: relative;
padding-left: 20px;
cursor: pointer;
}
label:before,
label:after {
font-family: FontAwesome;
font-size: 14px;
/*absolutely positioned*/
position: absolute;
top: 0;
left: 0;
}
label:before {
content: '\f096';
/*unchecked*/
}
label:after {
content: '\f046';
/*checked*/
/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
/*CSS3 transitions for animated effect*/
transition: all 0.35s;
}
/*hiding the original checkboxes*/
input[type="checkbox"] {
display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"]:checked + label:after {
max-width: 25px;
/*an arbitratry number more than the icon's width*/
opacity: 1;
/*for fade in effect*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="checkbox" name="chat1" id="chat1" checked/>
<label for="chat1" style="font-weight: normal; margin-bottom: 0px;">DreamhackCS</label>
<br>
<input type="checkbox" name="chat2" id="chat2" />
<label for="chat2" style="font-weight: normal; margin-bottom: 0px;">IzakOOO</label>
<br>
<input type="checkbox" name="chat3" id="chat3" />
<label for="chat3" style="font-weight: normal; margin-bottom: 0px;">Nightblue3</label>
<br>
<input type="checkbox" name="chat4" id="chat4" />
<label for="chat4" style="font-weight: normal; margin-bottom: 0px;">imaqtpie</label>
<br><br>
<input type="checkbox" name="active" class="selectchat_active" id="active" />
<label for="active" style="font-weight: normal; margin-bottom: 0px;">Check none</label>
<br>
<input type="checkbox" name="all" class="selectchat_all" id="all"/>
<label for="all" style="font-weight: normal; margin-bottom: 0px;">Check all</label>
关于javascript - 自定义 CSS 复选框 jQuery 诱导的 "checked"属性在视觉上不显示 "check"复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36603127/