自定义CSS复选框jQuery诱导的“;“已检查”;属性不't在视觉上”;“检查”;复选框
Custom CSS checkbox jQuery-induced "checked" property doesn't visually "check" the checkbox
首先,对于这个模糊的问题,我不知道如何用语言表达。我的问题最好用一个例子来说明。
我使用了一个引导下拉菜单,里面有几个复选框。我使用了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个通道。单击"不勾选"将取消勾选所有选项。(到目前为止还不错)。然而,在那之后,"全部检查"就不再有效了。它不再检查4个频道。"不勾选"仍然取消勾选所有选项(如果手动勾选),但"全部勾选"不再有效。。。
有人能找到我的问题吗:)?非常感谢你的帮助。
使用.pr()而不是.attr()
attr()只更新实际的DOM树
有关详细信息,请参阅http://api.jquery.com/prop/或者这个答案
$('.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>
尝试使用.prop
而不是.attr
:
$('#chat1, #chat2, #chat3, #chat4').prop('checked', true);
有关更多信息,请参阅此答案。
相关文章:
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- j查询检查复选框是否被选中,然后向输入字段添加值
- 检查复选框状态-Javascript
- JQuery:如何检查复选框是否被选中并向字段添加属性
- 如何检查复选框是否在特定表单中被选中
- 如何在HTML和JavaScript中检查复选框是否为真
- JavaScript 检查复选框是否被输入值禁用
- 如何使用 *jquery mmenu 插件*检查复选框是否处于选中状态
- 按使用 jquery 检查复选框的顺序显示文本
- Acrobat XI Pro:检查复选框的状态以影响计算
- AngularJS指令,用于检查复选框列表中是否至少选中了一个项目
- 检查复选框是否被选中(js/jquery)
- 如何在单击复选框之前检查复选框是否已选中
- 使用jsTree以编程方式检查复选框节点
- 单击复选框时检查复选框的选中状态
- 如何检查复选框是否被选中
- jQuery检查复选框是否被选中,并使用复选框's值,如果它's是空的
- jQuery-检查复选框值(链接jQuery函数与If Statment)
- 如何确保使用Javascript检查复选框
- 如何检查复选框是否与Protractor、CucumberJS和Chai一起选中