Question

我对jQuery有一个奇怪的错误。

您可以在我的HTML中看到我的标识为checkbx的输入，并且在我的javascript中，我有一个标记为checkbox的选择器。

现在，尽管jQuery似乎选择了一个不存在的id，但所有这些都有效。

当我尝试通过将选择器更改为checkbx或将ID更改为checkbox来尝试修复此错误时出现此问题，当我这样做时，第一次单击复选框时未注册，这会弄乱词语的颜色。

我的问题是，为什么会发生这种情况以及如何解决这个问题。

这是我的代码。

＆＃13;

function checkbox() {
var $y = $("#yon");
var $n = $("#non");
var $cx = $("#chex")
var $cbx = $("#checkbox");
var chval = false;
$(".cspan").click(function() {
	$n.toggleClass("no");
	$y.toggleClass("yes");
	if (chval) {
		$cx.text("\u2716");
		$cbx.prop('checked', false);
		chval = false;
	}
	else {
		$cx.text("\u2714");
		$cbx.prop('checked', true);
		chval = true;
	}
});
}
$(function() {
    checkbox();
});

＆＃13;

.checkbx{
display:none;
}
.checkbx + label span {
    display:inline-block;
    width: 170px;
	height: 60px;
	border-radius: 25px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
	position:absolute;
	background-color: #ff3a31;
	transition: background-color 100ms linear;
	cursor:pointer;
}
.checkbx:checked + label span {
    background-color: #00cc66;
    transition: background-color 100ms linear;
}
.checkemb{
	position:relative;
	display:inline-block;
	margin-right:10px;
	margin-left:10px;
	font-family:"Arial Black", Gadget, sans-serif;
	color:#ffffff;
	cursor:pointer;
	background-color: rgba(0, 0, 0, 0);
}
p.xy{
	margin-right:25px;
	margin-left:25px;
}
p.yes{
	color:#990800;
	transition: color 100ms linear;
}
p.no{
	color:#008040;
	transition: color 100ms linear;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="Checkbox test-css.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="Checkbox test-js.js"></script>
	</head>
	<body>
		<div id="checkcon">
			<input id="checkbx" class="checkbx" type="checkbox"/>
			<label for="checkbx">
				<span class="cspan">
					<p class="checkemb yes" id="yon">Yes</p>
					<p class="checkemb xy" id="chex"><strong>&#10006;</strong></p>
					<p class="checkemb" id="non">No</p>		
				</span>
			</label>
		</div>
	</body>
</html>

＆＃13;

Answer 1

这是你想要的吗？

https://jsfiddle.net/guanzo/kj50soov/1/

function checkbox() {
var $y = $("#yon");
var $n = $("#non");
var $cx = $("#chex")
var $cbx = $("#checkbx");
var chval = false;
$(".cspan").click(function() {
    $n.toggleClass("no");
    $y.toggleClass("yes");
    if (chval) {
        $cx.text("\u2716");
        chval = false;
    }
    else {
        $cx.text("\u2714");
        chval = true;
    }
});
}
$(function() {
    checkbox();
});

像Pointy所说，您不需要手动设置checked属性。如果你选择一个虚假的id，jQuery也不会抛出任何错误或任何东西，所以它首先不是“工作”。

jQuery选择器的奇怪问题

1 个答案: