2010-12-15 9 views
0

のクリックで複数のリスト項目の値を選択するには:使用jQueryのは、私が(LIの任意の量で)このようなリストを持っているボタン

<ul> 

<li> 
    <div class="box"> 
    <table> 
    <tr> 
    <td>Product 1</td> 
    <td><input type="hidden" class="hiddenid" value="5" /></td> 
    <td><input type="checkbox" value="yes" /></td> 
    </tr> 
    </table> 
    </div> 
</li> 


<li> 
    <div class="box"> 
    <table> 
    <tr> 
    <td>Product 2</td> 
    <td><input type="hidden" class="hiddenid" value="6" /></td> 
    <td><input type="checkbox" value="yes" /></td> 
    </tr> 
    </table> 
    </div> 
</li> 


</ul> 

<input type="submit" id="submit" /> 

と、私は、各項目をループするためにjQueryのを使用する必要があると#submitをクリックすると、チェックされたチェックボックスで各項目の#hiddenid値を収集します(結局、この文字列をPHPページとデータベースに渡します)。

これは私のIDのトラバースを修正する方法があるが(すなわちnoobのを)相対的な初心者であることはJQueryで私の試み、私は非常に失われています...私は期待しています

<script> 
$(document).ready(function() { 

    $(".arrow").click(function() { 

    var id = $.each("#stockyesno:checked").closest(".box").find(".hiddenid").val(); 

    alert(id); 

    }); 


}); 
</script> 

ですより複雑ではありません...

私は質問を簡略化しましたが、これに答えることができれば、より複雑なコードへの答えを拡大することができます。

事前にお世話になりました!

+2

LI内のDIV内のテーブル?どうして? –

+0

'.card'とは何ですか? – SLaks

+0

@Matt Ball翻訳に誤りがあった、私はあなたに保証します:) – Alex

答えて

2

あなたは、値文字列のセットにチェックボックスのセットを変換するmap methodを呼び出して、

var ids = $(".stockyesno:checked").map(function() { 
    return $(this).closest(".box").find(".hiddenid").val(); 
}).get(); 
var idString = ids.join(','); 

このコードがチェック要素を取得するには、通常のjQueryの呼び出しを使用して作成しようとしています。
それから、文字列のjQueryオブジェクトを通常の配列に変換するためにgetが呼び出されます。
最後に、Javascript joinメソッドを呼び出して、配列を単一のカンマ区切り文字列に変換します。

+0

これは、IDセレクタを使用してループする要素の* set *を取得していますか?:)(#hiddenidと同じで、 '.hiddenid'にする必要があります) –

+0

@Nick:私が答えを書いたとき、それらはIDであり、クラスではありませんでした。一定。 – SLaks

+0

編集のために申し訳ありません。 –

0

は、この構造を考えてみましょう:

<ul> 
    <li> 
     Product 1 
     <input type="hidden" class="hiddenid" value="5" /> 
     <input type="checkbox" value="yes" /> 
    </li> 
    <li> 
     Product 2 
     <input type="hidden" class="hiddenid" value="6" /> 
     <input type="checkbox" value="yes" /> 
    </li> 
</ul> 
+0

チップSimeのおかげで、私は後でテーブル構造が必要なものを開発する過程にある、私はより明確にすべきだった。 – Alex

0

あなたが製品のチェックボックスが選択されているかを決定しようとしている場合は、シンプルな方法があります。例えば

、あなたのチェックボックスフィールドは、このように見えた場合:

<input type="checkbox" name="product_id_1" id="product[1]" value="yes" /> 
<input type="checkbox" name="product_id_2" id="product[2]" value="yes" /> 
<input type="checkbox" name="product_id_3" id="product[3]" value="yes" /> 

あなたは、サーバーへの提出時に名前とその値を使用することができると思います。たとえば、最初と最後のチェックボックスを選択した場合は、URLパラメータproduct_id_1 = yesとproduct_id_3 = yesを使用できます。

シンプル

まだ:これらのチェックボックスのすべてが選択されている場合

<input type="checkbox" name="product_id" value="1" /> 
<input type="checkbox" name="product_id" value="2" /> 
<input type="checkbox" name="product_id" value="3" /> 

、PRODUCT_ID URLパラメータの値が1,2,3となります。 2と3だけが選択された場合、値は2,3となります。最初のチェックボックスだけを選択すると、値は1になります。

例コードでは、隠しフィールドに重複IDがあることを指摘しておきましょう。シンプルなサンプルコードを作成しようとしていたため、これは見落としている可能性があります。もしそうでなければ、この事実はあなたの問題を複雑にします。要素IDは一意でなければなりません。

+0

ID属性をクラスとして編集したことに気が付いたので、私の最後のコメントはもはやあなたの質問には関係しませんでしたが、私が推測しておく価値があります。 –

+0

ありがとうマイケル、私はそれぞれのチェックボックスにユニークなIDを割り当てることは考えていませんでしたが、各liには1つしかないので、JQueryで選択するのは問題ですか? URLパラメータとは何ですか? – Alex

+0

私が理解していたように、あなたはjQueryを使用して、提出の一部として使用する値を収集するのに役立っていました。あなたの唯一の目標が選択されたチェックボックスとその製品IDを提出することであれば、私の提案はjQueryを使わなくてもそのトリックを行うべきです。 –

関連する問題