web-dev-qa-db-ja.com

JQUERY:チェックされたチェックボックスとチェックされていないチェックボックスのIDを取得します

私はこれをあまり多くのチェックボックスを持っていません:

<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

誰かがそれを行う方法を教えてください。ありがとう。

22
jayAnn
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/

43
James Montagne

私はここで短いバージョンを手に入れたと思います:

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/

25
Mo Valipour

私はこれを次のように行います:

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;
});
5
John Kalberer

これは .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);
});

ここでテストできます。

2
karim79