我正在使用某个函数在特定类中附加复选框。我有一个函数可以在每次选中复选框时运行。所以我需要获取复选框的名称和 ID。
这是我动态附加复选框的代码部分。这里的值是我想要的 id 和 name 属性。
我正在使用某个函数在特定类中附加复选框。我有一个函数可以在每次选中复选框时运行。所以我需要获取复选框的名称和 ID。
这是我动态附加复选框的代码部分。这里的值是我想要的 id 和 name 属性。
使用设置ID
$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append('<label class="checkbox"><input type="checkbox" id="' + value + '" onclick="selectMainBrand("' + value + '");" />' + value + '</label>');
});
$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' onclick='selectMainBrand(\"" + value + "\");' />" + value + "</label>");
});
$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' id ='someID' name ='someName' />" + value + "</label>");
});
并在复选框上单击..
$(".fpblocks .fpblocksBrands_inner ul :checkbox").live('click', function(){
var id = $(this).attr('id'); //get id of checked checkbox
var name = $(this).attr('name'); //get name of checked checkbox
})
function selectMainBrand(ids) {
$('#Brands').on("change", "input", function () {
console.log("called");
var selected = this.name;
console.log(selected);
});
}
我假设你的 UL 标签有 id="brands"。如果不改变上面的代码如下
$('.fpblocks').on("change", "input", function () {
onclick='selectMainBrand(value);'
从输入的生成代码中删除
生成复选框后,您可以选择名称和
$('#Brands input').on("change", function () {
var name=$(this).attr("name"); var id=$(this).attr("id"); alert (名称);警报(id);console.log(选定);
});
您动态创建的 html( <input type='checkbox' onclick='selectMainBrand(value);' />
) 没有name
, 或id
. 你不能通过不存在的东西。为了解决这个问题,生成 aname
和 anid
来使用。
同样在您的selectMainBrand
函数中,您似乎没有使用ids
您传入的参数。该函数所做的只是将处理程序绑定到输入,因为您正在使用on
它来绑定它,所以看起来很愚蠢。
为什么不使用on
委托处理程序呢?如果您委托处理程序,则可以从处理程序中获取name
or id
,从而无需将它们作为参数传递(工作演示)。
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key //set the id, appending the key to make it unique
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
//delegate the change handler
$('.fpblocks .fpblocksBrands_inner').on("change", '#Brands input', function (e) {
var selectedName = this.name,
selectedId = this.id,
isChecked = this.checked;
console.log(JSON.stringify({
"called": true,
"selectedName": selectedName,
"selectedId": selectedId,
"isChecked": isChecked
}));
});
如果您真的在传递参数方面下定决心,有办法做到这一点,例如在创建输入的循环中绑定处理程序(工作演示):
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key //set the id, appending the key to make it unique
}).click(function (e) {
var self = $(this), // capture the input as a jQuery object (typically very useful)
actualHandler = function (id, name) {
// do stuff
console.log(JSON.stringify({
"called": "actualHandler",
"selectedName": id,
"selectedId": name,
"isChecked": self.prop('checked')
}));
};
actualHandler(this.id, this.name);
// or
actualHandler(self.attr('id'), self.attr('name'));
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
或者您可以onchange
在创建输入的循环中设置属性(工作演示):
window.inputHandler = function (id, name) { // must be added to the global scope, otherwise it won't be visible.
// do stuff
console.log(JSON.stringify({
"called": "inputHandler",
"selectedName": id,
"selectedId": name
}));
};
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key, //set the id, appending the key to make it unique
"onchange": "inputHandler('" + "mainBrand" + key + "', '" + "mainBrand" + key + "')"
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
还有其他方法可以解决这个问题。
就个人而言,我会使用代表团。