Question

我知道我已经问过这个问题here。但是因为我在那里找到了解决方案。我正在重新发布同样的问题。请耐心等待。

请找小提琴here。

HTML：

<label>
<input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello</span>
</label>

CSS：

label {
display: block;
width: 85%;
font: normal 12px/1.6em Arial;
}
.correctPadding .checkbox {
margin: 0;
display: inline;
margin-right: 6px;
margin-top:2px;
}
input[type="checkbox"]:checked + span {
font-weight: bold;
}

我的JS试用版是：

if ($('.checkbox').is(':checked')) {
    $(this).next().css({ "font-weight": "bold" })
}

选中复选框后，复选框标签应变为粗体。它适用于所有浏览器，IE8除外。

我们可以解决这个问题吗

Answer 1

也许是这样

＆＃13;

$(document).ready(function(){
			$('input[type="checkbox"]').each(function(){
				if(/span/i.test($(this).next()[0].tagName) && this.name){
					$(this).change(function(){
						$('input[type="checkbox"][name="'+this.name+'"]').each(function(){
							$(this).next()[this.checked?"addClass":"removeClass"]("Checked");
						});
					});
					if(this.checked) $(this).next().addClass("Checked");
				}
			})
		});

＆＃13;

label {
    display: block;
    width: 85%;
    font: normal 12px/1.6em Arial;
}
.correctPadding .checkbox {
    margin: 0;
    display: inline;
    margin-right: 6px;
    margin-top:2px;
}
input[type="checkbox"]:checked + span {
    font-weight: bold;
}
.Checked{
	font-weight: bold;
	color: #f00; /*for example*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello</span>
</label>
    <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 2</span>
</label>
        <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 3</span>
</label>
            <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 4</span>
</label>

＆＃13;

Answer 2

这很简单：

$(".checkbox").change(function () {
    if ($(this).next().hasClass("checkboxSpanTextBold")) {
        $(this).next().removeClass("checkboxSpanTextBold");
    }
    else {
        $(this).next().addClass("checkboxSpanTextBold");
    }
});

CSS：

.checkboxSpanTextBold {
font-weight:bold;
}

使用change会为我做点什么。

感谢大家的支持。

input [type =“checkbox”]：选中在IE8中不起作用

2 个答案: