2012-04-12 10 views
2

ラベルのテキストをラベルにしてチェックボックスを選択しますか?構造以下

<label class="selectit"> 
    <input value="3" type="checkbox" name="tax_input[event_type][]" id="in-event_type-3"> 
    Workshops 
</label> 

は私が簡単にチェックボックスがチェックされているかどうかを確認するためにそれを行うことができます...

if ($('#in-event_type-3').attr('checked')) { 

も、私は「ワークショップ」に置くことができるセレクタを使用するには、いくつかの方法がありますチェックボックスを選択するには?問題は、チェックボックスのidが動的に生成され、時々刻々と変化することです。 label -text "Workshops"は私によって設定されていますが、どういうわけかこの "Workshops"文字列を使ってチェックボックスを選択するセレクタを書くことができますか?

これに関するアイデアはありますか?

+0

は、ラベルの有効なHTMLでチェックボックスをラップされていますか? – JeffSahol

+1

@JeffSaholそれは有効であるだけでなく、より大きなヒット領域を与えるので、非常に良い方法です。 –

答えて

4

するTry THS :containsセレクター:

$(".selectit:contains('Workshops')").find("input[type='checkbox']").attr('checked'); 
+0

これは、ありがとうございます! @rest htmlはwordpressのバックエンドなので変更できません。ラベルのみが私によって設定されます。 – matt

0

が属性のためにあなたのラベルaを与える:

<label class="selectit" for="in-event_type-3"> 

編集:謝罪、随時IDの変更を認識していませんでした。 また、jQueryを入力してforを指定してforを割り当てることもできます。 このように:

$('input').each(function() { 
    $(this).parent().attr('for', $(this).attr('id')); 
}); 
1

クラスを追加することはできませんか?

それを選ぶのが簡単ですか?

if($('.Workshops').is(':checked')) 
0

あなたがそれにクラスを置くために、あなたの入力を制御することができた場合(「ワークショップ」それを呼び出すことができます)、それは次のようになります。

だから、
$(".workshop").attr("checked", "checked"); 
0

、みんなはクラスを使用すると述べています- あの人達の話を聞いて!はるかに簡単です!

しかし、HTMLコンテンツを変更することは、単にオプションではない場合があります。その場合、いくつかの汚い作業に頼らざるを得ず、対応するチェックボックスを見つけるためにラベル要素に含まれるすべてのテキストを見る必要があります。

var selectedCheckboxes = []; 
$.each($("#container > label"),function(index,elem){ 
    var labelText = $(elem).text(); 
    var testString = "Workshops"; 
    if (labelText.match(testString)){ 
    selectedCheckboxes = $(elem).find("input[type='checkbox']:checked"); 
    } 
}); 

私は、マークアップが少し複雑(自分のテキストの内容と追加の子要素のように)である場合、このメソッドはしなければならないが、このソリューションは、あなたが与えた簡単な例のために働くということを警告しなければなりませんもっと大きくなり、より複雑になります。

HTMLマークアップ内の要素のテキストコンテンツと一致するセレクタがありません。要素のテキスト内容は、データまたは情報の視覚的な表現でなければなりません。アイデンティティ情報を含むべきではありません。要素とセットを識別するには、兄弟や子孫から離れて、idclassの属性を使用します。より多くのものが使用できますが、これらは基本的なビルディングブロックです。

ここで注意すべきことは、jQueryの.text()機能の動作です。それは以下となります。

はその子孫を含むマッチした要素の集合、の各要素の組み合わせテキストの内容を取得します。

重点は:contains()セレクタは子孫に関して同様の挙動を有し、前の回答でalready been coveredを有する

を加えました。

<div id="matt"> 
    One 
    <span>Two</span> 
    <div> 
    <label>Three</label> 
    </div> 
    Four 
</div> 

$("#matt").text()への呼び出しがもたらすであろう。この最小限のHTMLスニペットを考えると、よりハンズオンとこの制限の視覚的な例にオン

...

子孫のテキストコンテンツが同様に含まれるすべての...

0
var element = $('input').filter(function() { 
    return $.trim($(this).parent('label').text())=='Workshops'?$(this):null; 
}); 

var isChecked = $(element).attr('checked'); //true-false 
関連する問題