ID를 변경하지 않고 레이블을 선택하는 방법은 무엇입니까?

Question

은 내가 양식을 코딩에있어 여기이 chekboxes 있습니다

이

<div class="thumb1" > 
     <label for="ltype"><img class="img" src="images/my1.jpg" /></label> 
     <input type="checkbox" class="chk" name="ltype[]" id="ltype" value="word" required /><hr> <center><p><strong>Word Mark Logo</strong> 
</div> 

<div class="thumb1" > 
     <label for="letter"><img class="img" src="images/my2.jpg" /></label> 
     <input type="checkbox" class="chk" name="ltype[]" id="ltype" value="letter" /><hr> <center><p><strong>Letter Mark Logo</strong></p></center> 
</div> 

<div class="thumb1"> 
     <label for="emblerm"><img class="img" src="images/my3.jpg" /></label> 
     <input type="checkbox" class="chk" name="ltype[]" id="ltype" value="emblerm" /><hr> <center><p><strong>Emblerm Logo</strong></p></center> 
</div> 

문제는 내가 내 체크 박스 아이디의 ID를 변경하지 않고 그들을 클릭하면 내 체크 박스를 통해 이미지를 선택하는 것이 필요 이것이다 자바 스크립트 코드 때문에 동일해야합니다. <label for=""> 태그 대신 무엇을 사용할 수 있습니까?

같은 ID는이 시계 이유 : 사전에

<script type="text/javascript"> 
function logotype() { 
    var group = document.newlogo.ltype; 
    for (var i=0; i<group.length; i++) { 
     if (group[i].checked) 
      break; 
    } 
    if (i==group.length) 
     return alert("Please select 1 to 3 Logo Types"); 
} 
</script> 

어떤 생각 덕분에 여기에 몇 가지 문제가있다

Answer 1

..

먼저 떨어져 아이디의 사용자가 사용하는 경우, 따라서 고유 한 것으로 생각된다

ID와 동적으로 스타일을 조작하고 있습니다. 그 스타일은 다른 ID에 적용됩니다.

내 제안은 사용 클래스입니다. 코드가 클래스와 작동하지 않는다면 작동하도록하십시오!

나에게 도움이되는 내용입니다. 이 자바와는 아무 상관이 없습니다

$(document).ready(function() { 
 
    $("label").on('click', function() { 
 
    $(this).children("img").toggleClass('active'); 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
} 
 

 
img { 
 
    border-top: 2px solid rgba(102, 170, 255, 0); 
 
    border-left: 2px solid rgba(102, 170, 255, 0); 
 
    border-right: 2px solid rgba(102, 170, 255, 0); 
 
    border-bottom: 2px solid rgba(102, 170, 255, 0); 
 
} 
 

 
.active { 
 
    border-top: 2px solid rgba(102, 170, 255, 0); 
 
    border-left: 2px solid rgba(102, 170, 255, 0); 
 
    border-right: 2px solid rgba(102, 170, 255, 0); 
 
    border-bottom: 2px solid rgba(102, 170, 255, 1); 
 
}

<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 

 
<label for="img1"> 
 
    <img src="http://ts1.mm.bing.net/th?id=R2skhroaNe%2b865q6n9cxDoQg60f3G4ZX2nb4KUkCPmolQ&w=135&h=135&c=7&rs=1&qlt=90&pid=1.9"> 
 
</label> 
 
<input type="checkbox" id="img1"> 
 

 
<label for="img2"> 
 
    <img src="http://ts1.mm.bing.net/th?id=RhpQjwU5DUZo1Rw%2fsJyaoZA1ffuNKdpTJ%2bT5pQkMTbjUQ&w=135&h=135&c=7&rs=1&qlt=90&pid=1.9"> 
 
</label> 
 
<input type="checkbox" id="img2"> 
 

 
<label for="img3"> 
 
    <img src="http://ts1.mm.bing.net/th?id=RVifPWx3AufqCw21DOl1YjwlZlAmWOIenplPjQ8AalonA&w=135&h=135&c=7&rs=1&qlt=90&pid=1.9"> 
 
</label> 
 
<input type="checkbox" id="img3"> 
 

 
<label for="img4"> 
 
    <img src="http://ts1.mm.bing.net/th?id=RgqVmxiIgHNkWlfImUiZBYg4Kg5hrQ0vW3pKcpUsOcQZQ&w=135&h=135&c=7&rs=1&qlt=90&pid=1.9"> 
 
</label> 
 
<input type="checkbox" id="img4">