JQUERY: 获取已选和未选复选框的id

Question

我有不太多的复选框：

<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

能否有人向我展示如何做呢？谢谢。

- jayAnn

Answer 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/

- James Montagne

---

我应该如何提醒 fruitsGranted 和 fruitsDenied？ - jayAnn

"alert(someObj.fruitGranted);" 的意思是弹出窗口显示变量 "someObj" 中的 "fruitGranted" 属性。当然，你不一定非得用对象这种形式，只是你的标记语言让人觉得你想要一个对象而已。 - James Montagne

@jayAnn：alert( someObj.fruitsGranted.join(",") ); - naveen

在答案中添加了一个 fiddle。 - James Montagne

@Techy {}是一个空对象。 - James Montagne

Answer 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/

- Mo Valipour

---

这里调用get()函数有什么要求吗？似乎$(":checkbox:checked").map(idSelector)本身就能完成任务。 - TechnicalSmile

.get() 将 jQuery 数组转换为本地数组。我猜你也可以不用它。—— 通过在结果上调用一个 jQuery 函数（比如 .find()），你可以亲自验证差异。 - Mo Valipour

Answer 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;
});

- John Kalberer

---

is() 函数应该被改为 filter() 函数。is() 函数返回布尔值。 - Sanghyun Lee

Answer 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);
});

你可以在这里测试。

- karim79