隐藏输入未正确选择的自定义复选框.Javascript需要调整
Custom checkbox with hidden inputs not selecting properly. Javascript needs adjusting
我正在使用自定义复选框,input
隐藏在span
中;我已经编写了一个脚本来添加checked
类,但它实际上并没有将输入标记为选中。 我在这里做错了什么?
更新:所以复选框现在检查! 万岁。 一个新的问题是,隐藏复选框上的可见性,在复选框区域选中时也会隐藏新类......如果单击标签,则复选框显示为选中,但如果单击复选框图像本身,则不会有任何变化...
.HTML
<fieldset>
<label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label>
<span class="open-checkbox">
<input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" />
</span>
</fieldset>
.CSS
.open-checkbox {
background-position: -4px -48px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
.checked {
background-position: -4px -12px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
input[type=checkbox] {
visibility: hidden;
}
#key-areas-inputs label.sublabel {
display: block;
float: left;
height: 44px;
padding: 0 0 0 10px;
width: 300px;
}
#key-areas-inputs input.key-areas-checkbox {
float: right;
display: block;
clear: none;
height: 22px;
width: 22px;
margin-top: 18px;
margin-right: 4px;
margin-bottom: 0px;
margin-left: 0px;
}
#key-areas-label {
font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #df007c;
display: block;
clear: left;
float: left;
width: 348px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
text-align: right;
}
.JS
// check checked boxes on load
$(".key-areas-checkbox:checked").each(function(){
$(this).next().addClass('checked');
});
// add class and checked attribute to filter inputs
$('.open-checkbox').click(function () {
console.log('click');
var $this = $(this);
var $input = $this.find('input');
$this.toggleClass('checked', $input.is(':checked'));
return;
if($input.prop('checked')){
$this.removeClass('checked');
} else {
$this.addClass('checked');
}
});
要选中复选框添加:
$input.attr('checked','checked');
要取消选中:
$input.removeAttr('checked');
您的for
和id
不匹配。将您的id
更改为"复选框-见解和计划"(缺少"s"),它应该可以工作。
还要确保您的图像路径正确(我们无法用您的示例代码进行测试,因为它是相对路径;我只是用背景色尝试了一下,它奏效了)。
我想出了问题所在。 JS很好。 解决方法是将inputs
嵌套在label
内并包裹在div.
内 这给出了预期的效果。
相关文章:
- Javascript复选框函数:;缺少:在属性id之后"
- 潜水没有在Bootstrap/Javascript复选框菜单中排队
- JavaScript 复选框全选、取消全选、反转选择
- 单击离开时选中的 JavaScript 复选框
- Javascript复选框验证:如果用户没有't选中特定复选框
- Javascript复选框逻辑错误
- Javascript复选框填充输入并将不同的值传递给表单
- 简单的 JavaScript 复选框验证
- JavaScript 复选框表 - 如何添加值并查找最高值
- Ajax JavaScript 复选框更改不起作用
- Javascript 复选框表单验证
- 使用 JavaScript 复选框事件切换 html 的可见性
- JavaScript - 复选框的作用类似于单选按钮
- jQuery / JavaScript 复选框显示多个和单个选择中选中的复选框的数量
- javascript 复选框 - 仅在引导模式确定时取消选中
- 设置 JQuery HTML javascript 复选框工作,但不显示为选中状态
- Javascript复选框已选中触发器问题
- Javascript复选框的问题
- Javascript复选框递增和递减
- Javascript-复选框onclick-+操作