选中在Javascript上状态更改的复选框
选中在Javascript上状态更改的复选框
提问于 2015-04-17 22:56:44
我使用JavaScript动态创建了一些复选框(如下所示)，对于单击复选框时如何调用函数有什么想法(其状态是否已更改)？
var eng_types = table[3].slice(3);
for(var i in eng_types) {
var name = eng_types[i];
// Create the necessary elements
var label = document.createElement("label");
var checkbox = document.createElement("input");
var description = document.createTextNode(name);
checkbox.type = "checkbox"; // Make the element a checkbox
checkbox.value = name; // Make its value "pair"
checkbox.name = i; // Give it a name we can check
label.appendChild(checkbox); // Add the box to the element
label.appendChild(description); // Add the description to the element
// Add the label element to your div
document.getElementById('eng_options').appendChild(label);
}任何想法，如何使每个复选框出现在一个新的行，也将不胜感激。
提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-17 22:59:52
使用jQuery checkbox checked state changed event
$("#i").change(function() {
if(this.checked) {
//Do stuff
}
});由于您是动态添加元素，更健壮的解决方案可能是使用此方法(感谢@IgorAntun提到bind和on)：
$(document).on("change", "#i", function() {
if(this.checked) {
//Do stuff
}
});要在注释中添加上下文:前面的示例使用了选择器
$("[name='i']")，因为我将checkbox.name = i视为字符串，而不是它的变量。
关于使每个复选框出现在新行上，您可以使用<p></p>标记、<br />标记、<div></div>标记--实际上，任何对元素进行分组或有间距的标记。此外，您还可以使用CSS。这个方法是我最喜欢的，因为它允许调整校验框的间距，这是HTML标记所不能做的。
input {
display: block;
margin-top: 2px;
}Stack Overflow用户
发布于 2015-04-17 23:06:19
您还可以使用.bind('change', [...])或.on('change', [...])来替代@IronFlare的答案。示例：
使用.bind('change')
$('#item-to-check').bind('change', function() {
if(this.checked) {
// Element is checked
} else {
// Element is not checked
}
});使用.on('change')
$('#item-to-check').on('change', function() {
if(this.checked) {
// Element is checked
} else {
// Element is not checked
}
});另外，我建议在What is best way to perform jQuery .change()上查看Matt的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29710736
复制相关文章
相似问题
腾讯云开发者
