jQuery를 사용하여 TD 요소 이동

Question

한 번에 하나의 이미지 만 선택할 수 있도록 형제 라디오 상자를 가져 오려고 <td> 요소를 통과하려고합니다. (다음 예제를 사용하지만 형식을 지정하기 위해 테이블에 입력을 추가했습니다. 목적 http://jsfiddle.net/yijiang/Zgh24/1/) :

HTML :

<div id="divid"> 
<table> 
<tr> 
<td><input type="radio" name="test1" id="test1" value="1" /><label>IMAGE</label></td> 
<td><input type="radio" name="test2" id="test2" value="4" /><label>IMAGE</label></td> 
</tr> 
</table> 
</div> 

jQuery를 :

<script> 
$('#divid input:radio').addClass('input_hidden'); 
$('#divid label').click(function(){ 
    $(this).addClass('selected').siblings().removeClass('selected'); 
}); 
</script> 

나는 단지 하나를 보장하기 위해 제대로 통과하는 방법을 잘 모르겠어요 이미지가 <td> 요소 내에서 한 번에 선택할 수 있습니다 - 나는이 있지만 작동하지 않습니다 다음 시도했다 :

$(this).addClass('selected').parent('td').find('label').removeClass('selected'); 

어떤 아이디어?

Answer 1

하려고 이런 일을 할 수

$('#divid label').click(function(){ 
    $('label.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

Answer 2

라디오 입력의 이름이 다릅니다. 즉, 다른 라디오 버튼이기 때문에 동시에 선택할 수 있습니다. 가지고 있다면

<input type="radio" name="foo" value="1" /> 
<input type="radio" name="foo" value="2" /> 

그러면 다른 하나를 선택하면 브라우저가 자동으로 선택을 취소합니다. .selected 클래스를 설정 한 다음 현재 요소에 .selected 클래스를 추가되고있는 label 요소에서 클래스 .selected을 제거하는

Answer 3

가장 쉬운 방법은을 제거하는 것입니다 클래스를 추가 한 다음 추가 할 요소에 추가하십시오.

그래서이 같은 작업을해야합니다 : 당신의 바이올린에서

$('.selected').removeClass('selected'); 
$(this).addClass('selected'); 

Answer 4

를가 바로 형제를 선택의 문제입니다 - 당신이 그것을 접근해야 위의 테이블 예를 들어 http://jsfiddle.net/Zgh24/1248/

$('#sites label').click(function() { 
    $(this).addClass('selected').siblings('label').removeClass('selected'); 
}); 

하나의 연결된 그룹에서 모든 작업을 수행하면 선택된 항목이 클래스도 제거하게되므로 조금 다르게 적용됩니다.

$('#divid label').click(function() { 
    $(this).closest('tr').find('label').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

http://jsfiddle.net/Zgh24/1249/