jQuery를 사용하는 체크 박스 목록의 별

02 3.0을 2 성급 이미지 또는 3 스타 이미지로 변환하는 jQuery 플러그인을 사용하여 div의 CSS를 조작합니다. 이것에 대한jQuery를 사용하는 체크 박스 목록의 별

jQuery 코드는 이것에 대한

<script type="text/javascript"> 
     $(function() { 

      $('span.stars').stars();  

     }); 

     $.fn.stars = function() { 
      return $(this).each(function() { 
       $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16)); 
      }); 
     } 
</script>

와 CSS를

span.stars, span.stars span 
{ 
    display: block; 
    background: url(../../Images/star.png) 0 -16px repeat-x; 
    width: 80px; 
    height: 16px; 
} 
span.stars span 
{ 
    background-position: 0 0; 
}

이다하지만 지금은 체크 박스리스트에서 이것을 적용 할하지만이 작업을 수행 할 수있는 올바른 방법을받지하고있다.

내 checkboxlist은 다음과 같다 :

<asp:CheckBoxList ID="chbStars" runat="server" AutoPostBack="true" OnSelectedIndexChanged="chbStars_SelectedIndexChanged"> 
           <asp:ListItem Text="1" Value="1.0"> </asp:ListItem> 
           <asp:ListItem Text="2" Value="2.0"> </asp:ListItem> 
           <asp:ListItem Text="3" Value="3.0"> </asp:ListItem> 
           <asp:ListItem Text="4" Value="4.0"> </asp:ListItem> 
           <asp:ListItem Text="5" Value="5.0"> </asp:ListItem> 
          </asp:CheckBoxList>

내가이

#ctl00_ContentPlaceHolder1_chbStars label 
{ 

    background: url(../../Images/star.png) 0 -16px repeat-x; 
    width: 80px; 
    height: 16px; 
} 

#ctl00_ContentPlaceHolder1_chbStars span 
{ 
    background-position: 0 0; 
}

같은 CSS를 조작하여이 시도하지만 jQuery를 변경할 수있는 올바른 방법을받지는 무엇입니까?

어떤 방향으로 나에게 도움이 될 것입니다.

스팬의 경우 렌더링 된 HTML은

<span style="width: 32px;"></span>

그리고 checkboxlist의 렌더링 된 HTML은 당신이 $('#ctl00_ContentPlaceHolder1_chbStars label').stars();

처럼 뭔가에 jQuery를 선택기를 변경해야

<table border="0" id="ctl00_ContentPlaceHolder1_chbStars"> 
    <tbody><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$0\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$0" id="ctl00_ContentPlaceHolder1_chbStars_0"><label for="ctl00_ContentPlaceHolder1_chbStars_0">1</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$1\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$1" id="ctl00_ContentPlaceHolder1_chbStars_1"><label for="ctl00_ContentPlaceHolder1_chbStars_1">2</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$2\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$2" id="ctl00_ContentPlaceHolder1_chbStars_2"><label for="ctl00_ContentPlaceHolder1_chbStars_2">3</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$3\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$3" id="ctl00_ContentPlaceHolder1_chbStars_3"><label for="ctl00_ContentPlaceHolder1_chbStars_3">4</label></td> 
    </tr><tr> 
     <td><input type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$chbStars$4\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$chbStars$4" id="ctl00_ContentPlaceHolder1_chbStars_4"><label for="ctl00_ContentPlaceHolder1_chbStars_4">5</label></td> 
    </tr> 
</tbody></table>

출처

2012-04-21 rahularyansharma

생성 된 HTML 코드가 도움이 될 것입니다 .. –

@remy에 걸쳐합니다 체크 박스 목록 – rahularyansharma

(또는 그 두 가지 모두 포함)) –

입니다 .css, # ctl00_ContentPlaceHolder1_chbStar를 조정해야합니다. 의 레이블 범위 나에 대해 어느 ..
난이 당신에게 무언가를 표시합니다 희망

이 체크 박스를 통해 선택을 코딩 할 필요가

출처

2012-04-21 14:14:33

jQuery를 사용하는 체크 박스 목록의 별

답변

관련 문제