AddClass RemoveClass 在浏览器上的行为不同
AddClass RemoveClass acts different on browsers
嗨,我看了很多。有很多类似的问题,但找不到我的答案。
我有两个复选框如下:
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
我 check/uncheck 具有以下内容:(如果一个选中另一个取消选中)
$('.upsfilter').on('click', function (e) {
if ($(this).prop('checked')) {
$('.upsfilter').prop('checked', false);
$('.upsfilter').parent().removeClass('checked');
$(this).prop('checked', true);
$(this).parent().addClass('checked');
}
)};
$('.upsfilter').on('click', function(e) {
if ($(this).prop('checked')) {
$('.upsfilter').prop('checked', false);
$('.upsfilter').parent().removeClass('checked');
$(this).prop('checked', true);
$(this).parent().addClass('checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
label class="checked"
显示复选框中的自定义小方块。
修改上面的代码:
a) 火狐,Chrome。 Check/Uncheck 工作但 label class="checked" 工作相反。 (勾选时显示正方形为假)
b) IE 11 工作正常
但是如果我删除 $(this).parent().addClass('checked');
Firefox 和 Chrome 工作正常,但 IE 做同样的事情 (a)
是否存在与 IE、Chrome 或 Firefox 的兼容性问题? IE 反应更有意义。任何帮助将不胜感激。
谢谢。
我使用 is(':checked')
检查复选框是否被选中,并使用 closest('.custom-chk').siblings().find('.upsfilter')
查找下一个和上一个复选框。
希望这就是您要找的,谢谢
$('.upsfilter').click(function(e){
if($(this).is(':checked'))
{
$(this).parent().addClass('checked'); //Adding class to current checkbox
var check =$(this).closest('.custom-chk').siblings().find('.upsfilter')
check.prop('checked',false)
check.parent().removeClass('checked') //Removes class of other checkbox
}
else
$(this).parent().removeClass('checked');
})
.checked
{
color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
您可以在附加事件的地方使用目标,然后切换 classes。
重读后我看到你想要 label
和 class 所以我调整了它>
此外,您需要使用 change
事件,因为并非所有更改它的操作都是点击。
$('.custom-chk').on('change', '.upsfilter', function(event) {
let me = $(this);
let isChecked = me.prop("checked");
let checks = $('.upsfilter');
checks.not(me).prop('checked', false);
checks.closest('label')
.toggleClass('checked', false);
checks.filter(':checked').closest('label')
.toggleClass('checked', true);
});
.checked {
border: solid red 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
嗨,我看了很多。有很多类似的问题,但找不到我的答案。
我有两个复选框如下:
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
我 check/uncheck 具有以下内容:(如果一个选中另一个取消选中)
$('.upsfilter').on('click', function (e) {
if ($(this).prop('checked')) {
$('.upsfilter').prop('checked', false);
$('.upsfilter').parent().removeClass('checked');
$(this).prop('checked', true);
$(this).parent().addClass('checked');
}
)};
$('.upsfilter').on('click', function(e) {
if ($(this).prop('checked')) {
$('.upsfilter').prop('checked', false);
$('.upsfilter').parent().removeClass('checked');
$(this).prop('checked', true);
$(this).parent().addClass('checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
label class="checked"
显示复选框中的自定义小方块。
修改上面的代码:
a) 火狐,Chrome。 Check/Uncheck 工作但 label class="checked" 工作相反。 (勾选时显示正方形为假)
b) IE 11 工作正常
但是如果我删除 $(this).parent().addClass('checked');
Firefox 和 Chrome 工作正常,但 IE 做同样的事情 (a)
是否存在与 IE、Chrome 或 Firefox 的兼容性问题? IE 反应更有意义。任何帮助将不胜感激。
谢谢。
我使用 is(':checked')
检查复选框是否被选中,并使用 closest('.custom-chk').siblings().find('.upsfilter')
查找下一个和上一个复选框。
希望这就是您要找的,谢谢
$('.upsfilter').click(function(e){
if($(this).is(':checked'))
{
$(this).parent().addClass('checked'); //Adding class to current checkbox
var check =$(this).closest('.custom-chk').siblings().find('.upsfilter')
check.prop('checked',false)
check.parent().removeClass('checked') //Removes class of other checkbox
}
else
$(this).parent().removeClass('checked');
})
.checked
{
color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>
您可以在附加事件的地方使用目标,然后切换 classes。
重读后我看到你想要 label
和 class 所以我调整了它>
此外,您需要使用 change
事件,因为并非所有更改它的操作都是点击。
$('.custom-chk').on('change', '.upsfilter', function(event) {
let me = $(this);
let isChecked = me.prop("checked");
let checks = $('.upsfilter');
checks.not(me).prop('checked', false);
checks.closest('label')
.toggleClass('checked', false);
checks.filter(':checked').closest('label')
.toggleClass('checked', true);
});
.checked {
border: solid red 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
<label>
<input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
Residential
</label>
</div>
<div class="custom-chk">
<label>
<input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
Commercial
</label>
</div>