[jquery] 확인란 레이블의 jQuery 선택기

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

레이블이있는 확인란이있는 경우 jQuery를 사용하여 레이블을 선택하려면 어떻게해야합니까? 라벨 태그에 ID를 부여하고 다음을 사용하여 선택하는 것이 더 쉬울 $(#labelId)까요?

답변

이것은 작동해야합니다 :

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

다음도 참조 : 선택기 / attributeEquals-jQuery JavaScript 라이브러리

답변

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

이를 통해 루프의 모든 필드에 대한 레이블도 선택할 수 있습니다. 레이블 에이 레이블이 정의 된 필드의 id가 for='FIELD'어디에 있는지 알려 주어야합니다 FIELD.

답변

이것은해야합니다 : 

$("label[for=comedyclubs]")

아이디에 영숫자가 아닌 문자가 있으면 attr 값을 따옴표로 묶어야합니다.

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

답변

다른 해결책은 다음과 같습니다.

$("#comedyclubs").next()

답변

함수 내에서 반복하거나 연관시키는 동안 $ (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 {}

답변