2014-09-27 19 views
-2

我在编码的格式,并拥有这些chekboxes这里:如何选择标签而不必更改ID?

<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号必须是相同的,因为JavaScript代码。我可以用什么来代替<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> 

任何想法,在此先感谢

+0

这有什么好做的与Java,有吗? – Dici 2014-09-27 22:30:48

+1

ID应该是唯一的。另外,您使用的是旧标记,中心标记已弃用。 – 2014-09-27 22:31:43

+0

可能有一个java答案:) – 2014-09-27 22:31:53

回答

0

这里有几个问题..

首先ID是假设如果你使用是独一无二的,因此一个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">

相关问题