확인란의 레이블에 대한 jQuery 선택기

확인란의 레이블에 대한 jQuery 선택기

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

레이블이 설명된 확인란이 있는 경우 jQuery를 사용하여 레이블을 선택하려면 어떻게 해야 합니까?레이블 태그에 ID를 지정하고 다음을 사용하여 선택하는 것이 더 쉽습니까?$(#labelId)?

이렇게 하면 됩니다.

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

참고 항목:선택기/속성 동일 - jQuery JavaScript 라이브러리

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

이렇게 하면 루프의 모든 필드에 대한 레이블도 선택할 수 있습니다.당신이 보장해야 할 것은 당신의 라벨이 다음과 같이 말하는 것입니다.for='FIELD'어디에FIELD이 레이블이 정의되는 필드의 ID입니다.

이렇게 하면 됩니다.

$("label[for=comedyclubs]")

ID에 영숫자가 아닌 문자가 있는 경우 특성 값을 따옴표로 묶어야 합니다.

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

또 다른 솔루션은 다음과 같습니다.

$("#comedyclubs").next()

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 솔루션을 사용하여 자바스크립트 사용을 피할 수 있습니다.:

input[type=checkbox]:checked+label {}

언급URL : https://stackoverflow.com/questions/1186416/jquery-selector-for-the-label-of-a-checkbox