jQuery 如果复选框被选中，请执行此操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4243554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
if checkbox is checked, do this
提问by android.nick
When I check a checkbox, I want it to turn <p>#0099ff.
当我选中一个复选框时，我希望它变成<p>#0099ff.
When I uncheck the checkbox, I want it to undo that.
当我取消选中该复选框时，我希望它撤消该复选框。
Code I have so far:
我到目前为止的代码：
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
/* NOT SURE WHAT TO DO HERE */
}
})
回答by jensgram
I would use.change()and this.checked:
我会使用.change()和this.checked：
$('#checkbox').change(function(){
var c = this.checked ? '#f00' : '#09f';
$('p').css('color', c);
});
--
——
On using this.checked
Andy Ehas done a great write-up on how we tend to overuse jQuery: Utilizing the awesome power of jQuery to access properties of an element. The article specifically treats the use of .attr("id")but in the case that #checkboxisan <input type="checkbox" />element the issue is the same for $(...).attr('checked')(or even $(...).is(':checked')) vs. this.checked.
关于使用this.checked
Andy E写了一篇关于我们如何过度使用 jQuery的精彩文章：利用jQuery的强大功能来访问元素的属性。这篇文章专门讨论了 的使用，.attr("id")但在它#checkbox是一个<input type="checkbox" />元素的情况下，问题对于$(...).attr('checked')（甚至$(...).is(':checked')）与this.checked.
回答by Chinmayee G
Try this.
尝试这个。
$('#checkbox').click(function(){
if (this.checked) {
$('p').css('color', '#0099ff')
}
})
Sometimes we overkill jquery. Many things can be achieved using jquery with plain javascript.
有时我们过度使用 jquery。使用 jquery 和普通的 javascript 可以实现很多事情。
回答by Benny Neugebauer
It may happen that "this.checked" is always "on". Therefore, I recommend:
可能会发生“this.checked”总是“on”的情况。因此，我建议：
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
console.log('Checked');
} else {
console.log('Unchecked');
}
});
回答by Benny Neugebauer
it's better if you define a class with a different colour, then you switch the class
最好定义一个不同颜色的类，然后切换类
$('#checkbox').click(function(){
var chk = $(this);
$('p').toggleClass('selected', chk.attr('checked'));
})
in this way your code it's cleaner because you don't have to specify all css properties (let's say you want to add a border, a text style or other...) but you just switch a class
通过这种方式，您的代码更清晰，因为您不必指定所有 css 属性（假设您想添加边框、文本样式或其他...），而只需切换一个类
回答by zedecliff
I found out a crazy solution for dealing with this issue of checkbox not checked or checked here is my algorithm... create a global variable lets say var check_holder
我发现了一个疯狂的解决方案来处理这个未选中或未选中的复选框问题，这是我的算法......创建一个全局变量让我们说var check_holder
check_holderhas 3 states
check_holder有 3 个状态
- undefined state
- 0 state
- 1 state
- 未定义状态
- 0 状态
- 1个州
If the checkbox is clicked,
如果单击复选框，
$(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
}
});
The code above can be used in many situation to find out if a checkbox has been checked or not checked. The concept behind it is to save the checkbox states in a variable, ie when it is on,off. i Hope the logic can be used to solve your problem.
上面的代码可以在很多情况下使用来确定复选框是否被选中。它背后的概念是将复选框状态保存在一个变量中，即何时打开、关闭。我希望逻辑可以用来解决您的问题。
回答by Prabhjit Singh
Check this code:
检查此代码：
<!-- 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>
回答by Sanjiv Malviya
Probably you can go with this code to take actions as the checkbox is checked or unchecked.
可能您可以使用此代码在选中或取消选中复选框时执行操作。
$('#chk').on('click',function(){
if(this.checked==true){
alert('yes');
}else{
alert('no');
}
});
回答by Klaster_1
$('#checkbox').change(function(){
(this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
回答by Jon Ryan
I would do :
我会做 ：
$('#checkbox').on("change", function (e){
if(this.checked){
// Do one thing
}
else{
// Do some other thing
}
});
See : https://www.w3schools.com/jsref/prop_checkbox_checked.asp
见：https: //www.w3schools.com/jsref/prop_checkbox_checked.asp
回答by John Slegers
Optimal implementation
最佳实施
$('#checkbox').on('change', function(){
$('p').css('color', this.checked ? '#09f' : '');
});
Demo
演示
$('#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>