259 
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>

それを説明するラベルが付いたチェックボックスがある場合、jQueryを使用してラベルを選択するにはどうすればよいですか？ラベルタグにIDを付けて、それを使用して選択する方が簡単でしょう$(#labelId)か？

4

5 に答える 5

477

これは機能するはずです：

$("label[for='comedyclubs']")

参照：Selectors /attributeEquals-jQueryJavaScriptライブラリ

于 2009-07-27T04:23:26.333 に答える
73 
$("label[for='"+$(this).attr("id")+"']");

これにより、ループ内のすべてのフィールドのラベルも選択できるようになります。確認する必要があるのは、このラベルが定義されているフィールドのIDがfor='FIELD'どこにあるかをラベルに指定することだけです。FIELD

于 2012-08-03T07:08:34.327 に答える
46

これはそれを行う必要があります：

$("label[for=comedyclubs]")

IDに英数字以外の文字が含まれている場合は、attr値を引用符で囲む必要があります。

$("label[for='comedy-clubs']")
于 2009-07-27T04:23:51.060 に答える
5

別の解決策は次のとおりです。

$("#comedyclubs").next()
于 2011-02-02T10:23:57.543 に答える
2

Kipに感謝します。関数内で反復または関連付けを行いながら、$（this）を使用して同じことを達成しようとしている可能性があります。

$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );

このプロジェクトの作業中にしばらく探しましたが、良い例が見つからなかったので、これが同じ問題を解決しようとしている他の人に役立つことを願っています。

上記の例では、私の目的は、無線入力を非表示にし、ラベルのスタイルを設定して、より滑らかなユーザーエクスペリエンスを提供することでした（フローチャートの方向を変更する）。

ここで例を見ることができます

この例が気に入った場合は、cssを次に示します。

.orientation {      position: absolute; top: -9999px;   left: -9999px;}
    .orienlabel{background:#1a97d4 url('http://www.ifreight.solutions/process.html/images/icons/flowChart.png') no-repeat 2px 5px; background-size: 40px auto;color:#fff; width:50px;height:50px;display:inline-block; border-radius:50%;color:transparent;cursor:pointer;}
    .orR{   background-position: 9px -57px;}
    .orT{   background-position: 2px -120px;}
    .orB{   background-position: 6px -177px;}

    .orienSel {background-color:#323232;}

およびJavaScriptの関連部分：

function changeHandler() {
    $(".orienSel").removeClass( "orienSel" );
    if(this.checked) {
        $("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
    }
};

ラベルが入力の後に続く場合、元の質問の代替ルートとして、純粋なcssソリューションを使用して、JavaScriptの使用を完全に回避することができます...：

input[type=checkbox]:checked+label {}
于 2017-03-05T09:50:24.020 に答える