当我选中一个复选框时，我希望它变成<p> #0099ff.
当我取消选中该复选框时，我希望它撤消它。
我到目前为止的代码：
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
/* NOT SURE WHAT TO DO HERE */
}
})
问问题
412301 次
11 回答
235
我会使用 .change()和this.checked：
$('#checkbox').change(function(){
var c = this.checked ? '#f00' : '#09f';
$('p').css('color', c);
});
--
关于使用this.checked
Andy E写了一篇关于我们如何倾向于过度使用 jQuery 的精彩文章：Utilizing the awesome power of jQuery to access properties of an element。这篇文章专门讨论.attr("id")了. #checkbox _<input type="checkbox" /> _$(...).attr('checked')$(...).is(':checked')this.checked
于 2010-11-22T08:27:56.607 回答
48
试试这个。
$('#checkbox').click(function(){
if (this.checked) {
$('p').css('color', '#0099ff')
}
})
有时我们会过度使用 jquery。使用带有纯 javascript 的 jquery 可以实现很多事情。
于 2010-11-22T08:26:53.393 回答
34
“this.checked”可能总是“打开”。因此，我建议：
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
console.log('Checked');
} else {
console.log('Unchecked');
}
});
于 2013-10-03T20:05:30.980 回答
21
最好用不同颜色定义一个类，然后切换类
$('#checkbox').click(function(){
var chk = $(this);
$('p').toggleClass('selected', chk.attr('checked'));
})
这样你的代码就更干净了，因为你不必指定所有的css属性（假设你想添加一个边框、文本样式或其他......）但你只需切换一个类
于 2010-11-22T08:26:24.980 回答
4
我发现了一个疯狂的解决方案来处理未选中或选中的复选框问题，这是我的算法...创建一个全局变量让我们说var check_holder
check_holder有 3 个状态
- 未定义状态
- 0 状态
- 1 个州
如果单击复选框，
$(document).on("click","#check",function(){
if(typeof(check_holder)=="undefined"){
//this means that it is the first time and the check is going to be checked
//do something
check_holder=1; //indicates that the is checked,it is in checked state
}
else if(check_holder==1){
//do something when the check is going to be unchecked
check_holder=0; //it means that it is not checked,it is in unchecked state
}
else if(check_holder==0){
//do something when the check is going to be checked
check_holder=1;//indicates that it is in a checked state
}
});
上面的代码可以在很多情况下用来判断一个复选框是否被选中。其背后的概念是将复选框状态保存在一个变量中，即当它打开、关闭时。我希望逻辑可以用来解决你的问题。
于 2014-01-28T14:35:14.520 回答
3
检查此代码：
<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
alert("checked");
}
else if($(this).prop("checked") == false){
alert("Checkbox is unchecked.");
}
});
</script>
于 2015-04-04T11:07:53.717 回答
1
$('#checkbox').change(function(){
(this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
于 2010-11-22T08:27:50.733 回答
1
可能您可以使用此代码在复选框被选中或未选中时采取行动。
$('#chk').on('click',function(){
if(this.checked==true){
alert('yes');
}else{
alert('no');
}
});
于 2016-04-03T13:37:13.530 回答
1
我会做 ：
$('#checkbox').on("change", function (e){
if(this.checked){
// Do one thing
}
else{
// Do some other thing
}
});
请参阅：https ://www.w3schools.com/jsref/prop_checkbox_checked.asp
于 2018-03-20T11:48:32.707 回答
0
最佳实施
$('#checkbox').on('change', function(){
$('p').css('color', this.checked ? '#09f' : '');
});
演示
$('#checkbox').on('change', function(){
$('p').css('color', this.checked ? '#09f' : '');
});<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>于 2016-04-03T13:51:32.513 回答
0
为什么不使用内置事件？
$('#checkbox').click(function(e){
if(e.target.checked) {
// code to run if checked
console.log('Checked');
} else {
//code to run if unchecked
console.log('Unchecked');
}
});
于 2017-06-25T13:30:57.323 回答