JQUERY：获取选中和未选中复选框的 id

Posted 2023-03-05

【中文标题】JQUERY：获取选中和未选中复选框的 id

【英文标题】：JQUERY: get the id's of the checked and not checked checkBox

【发布时间】：2011-10-17 14:12:22

【问题描述】：

我没有那么多复选框：

<input type="checkbox" id="mango" value="mango" /> <label>MANGO</label><br>
<input type="checkbox" id="santol" value="santol" /> <label>SANTOL</label><br>
<input type="checkbox" id="guava" value="guava" /> <label>GUAVA</label><br>
<input type="checkbox" id="lomboy" value="lomboy" /> <label>LOMBOY</label><br>
<input type="checkbox" id="apple" value="apple" /> <label>APPLE</label><br>
<input type="checkbox" id="orange" value="orange" /> <label>ORANGE</label><br>
 ...................<>

现在，我要做的是获取所有带有检查的复选框的 ID，而不是检查并放入一个数组中。像这样的：

"fruitsGranted":["apple","lomboy","orange"]; //check is true
"fruitsDenied":["mango","santol","guava"];  //check false

请有人告诉我怎么做。？谢谢。

【参考方案1】：

var someObj=;
someObj.fruitsGranted=[];
someObj.fruitsDenied=[];

$("input:checkbox").each(function()
    var $this = $(this);

    if($this.is(":checked"))
        someObj.fruitsGranted.push($this.attr("id"));
    else
        someObj.fruitsDenied.push($this.attr("id"));
    
);

http://jsfiddle.net/UqrYJ/

【讨论】：

如何提醒fruitsGranted 和fruitsDenied？

alert(someObj.fruitGranted); 你不需要把它放在这样的对象中，只是你的标记让它看起来像你想要一个对象。

@jayAnn: alert ( someObj.fruitsGranted.join(",") );

为答案添加了一个小提琴。

@Techy 是一个空对象。

【参考方案2】：

我想我这里有一个较短的版本：

var idSelector = function()  return this.id; ;
var fruitsGranted = $(":checkbox:checked").map(idSelector).get();
var fruitsDenied = $(":checkbox:not(:checked)").map(idSelector).get();

你可以在这里看到它的实际效果：http://jsfiddle.net/XPMjK/3/

【讨论】：

这里调用get()函数有什么要求，看来$(":checkbox:checked").map(idSelector)可以自己做？

.get() 将 jquery 数组转换为本机数组。我想你也可以没有它。 -- 你可以通过在结果上调用一个jquery函数（例如.find()）来证明差异，你可以看到差异

【参考方案3】：

我会这样做：

var all, checked, notChecked;
all = $("input:checkbox");
checked = all.filter(":checked");
notChecked = all.not(":checked)");

之后你可以使用jQuery.map来获取每个集合的id。

var checkedIds = checked.map(function() 
    return this.id;
);

var notCheckedIds = notChecked.map(function() 
    return this.id;
);

【讨论】：

is() 函数应改为filter() 函数。 is() 函数返回布尔值。

【参考方案4】：

这可以使用.map 来完成，尽管在这种情况下它与使用.each 并没有什么不同：

$(":checkbox").change(function() 
    var notChecked = [], checked = [];
    $(":checkbox").map(function() 
        this.checked ? checked.push(this.id) : notChecked.push(this.id);
    );
    alert("checked: " + checked);
    alert("not checked: " + notChecked);
);

You can test it here.