web-dev-qa-db-ja.com

チェックボックスのラベルのjQueryセレクタ

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

ラベル付きのチェックボックスがある場合、jQueryを使用してラベルを選択する方法を教えてください。ラベルタグにIDを付けて$(#labelId)を使ってそれを選択するほうが簡単でしょうか？

jquerycheckboxjquery-selectors
227
Darwyn

これはうまくいくはずです。

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

参照： Selectors/attributeEquals - jQuery JavaScript Library

418
Kip
$("label[for='"+$(this).attr("id")+"']");

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

67
Hanky Panky

これはそれをするべきです：

$("label[for=comedyclubs]")

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

$("label[for='comedy-clubs']")
43
Darko Z

別の解決策は以下の通りです。

$("#comedyclubs").next()
5
Briganti

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

$("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 {}
0
Pete - iCalculator