radio样式脚本问题。

Question

JavaScriptCSSHTML

Answer 1

if(j == i){
            document.getElementById("money_l_" + j).style.backgroundImage ='url(../images/images_pay/money_onback.jpg)';
        }
        else{        
            document.getElementById("money_l_" + j).style.backgroundImage = "";
        }

Answer 2

不懂你具体的需求，如果是鼠标移上去，可以用样式控制那个对号，js控制选中。点击换背景，js控制就行了

Answer 3

对，要给radio加相同的name才行！这是radio的基本规则！

Answer 4

http://blog.sina.com.cn/s/blog_5af1c9c101012ike.html
通过这个帖子，搞定了，
name的的确忘了加了。后来添加另外一组radio时出现问题，才发现name忘了。<script type="text/javascript" src="js/jquery.min.js"></script>
<style type='text/css'> 
    
        fieldset { 
            border: 0; 
            padding-bottom: 9px;
        }
        label { 
    color:#000;
            display: block;
float:left; margin:0 0 0 0px;
            cursor: pointer;
width:176px;
            line-height: 32px; 
            padding-bottom: 9px; 
        }
       
        .money_radios { 
            padding-top: 6px; width:460px;
        }
.bank_radios{padding-top: 6px; width:650px;}

        .label_radio input { 
            margin-right: 5px;
        }
.label_radio h4{ display:block; float:left; height:28px; margin:4px 0 0 40px; _margin:4px 0 0 20px;font-family:"宋体"; font-size:14px; color:#333;}
.label_radio_bank img{ display:block; float:left; height:20px; margin:12px 0 0 30px;_margin:12px 0 0 15px;}        
        /*第一组*/
        .has-js .label_radio{ 
            background:url(images/images_pay/money_raido.jpg) no-repeat; margin-left:1px;
        }
        .has-js .label_radio { 
            background-position: 0 -40px; 
        }

        .has-js label.r_on { 
            background-position: 0 0px; 
        }
        .has-js .label_radio input { position: absolute; left: -9999px; } 
/*第二组*/


.has-js .label_radio_bank{background:url(images/images_pay/bank_raido.jpg) no-repeat; width:150px; height:29px; margin-left:1px;}
        .has-js .label_radio_bank { 
            background-position: 0px -38px;
        }

        .has-js label .r_on { 
            background-position: 0px 0px; 
        }
        .has-js .label_radio_bank input { position: absolute; left: -9999px; } 
  </style> 
  
 
 
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
        $(function(){
            $('body').addClass('has-js');
            $('.label_radio,.label_radio_bank').click(function(){
                setupLabel();
            });
            setupLabel();
        });
});//]]>  
 
</script> 
<script type="text/javascript"> 
        function setupLabel(){            if($('.label_radio input').length) {
                $('.label_radio').each(function(){
                    $(this).removeClass('r_on');
                });
                $('.label_radio input:checked').each(function(){
                    $(this).parent('label').addClass('r_on');
                });
            };

if($('.label_radio_bank input').length) {
                $('.label_radio_bank').each(function(){
                    $(this).removeClass('r_on');
                });
                $('.label_radio_bank input:checked').each(function(){
                    $(this).parent('label').addClass('r_on');
                });
            };
        }        
        
    </script>
<table>
<tr>
<td  class="td_1"><h4 style="display:block; margin:-30px 0 0 0;_margin:-5px 0 0 0;">充值金额：</h4>
</td>
<td class="td_2">
<div class="money">
      <fieldset class="money_radios"> 
        <label for="moneyradio-01" class="label_radio"> 
                    <input type="radio" checked="" value="1" id="moneyradio-01" name="sample-radio_1" /><h4>100万币<font class="coler_1">(120元)</font></h4>
                </label> 
        <label for="moneyradio-02" class="label_radio"> 
                    <input type="radio" value="2" id="moneyradio-02" name="sample-radio_1" /><h4>500万币<font class="coler_1">(600元)</font></h4>
                </label> 
        <label for="moneyradio-03" class="label_radio"> 
                    <input type="radio" value="3" id="moneyradio-03" name="sample-radio_1" /><h4>1000万币<font class="coler_1">(1150元)</font></h4>
                </label> 
        <label for="moneyradio-04" class="label_radio"> 
                    <input type="radio" value="4" id="moneyradio-04" name="sample-radio_1" /><h4>5000万币<font class="coler_1">(5500元)</font></h4>
                </label> 
      </fieldset>
</div>
</td>
</tr>
<tr>
<td  class="td_1"><h4 style="display:block; margin:-130px 0 0 0;_margin:0px 0 0 0;">充值银行：</h4></td>
<td class="td_2">
<div class="bank">
       <fieldset class="bank_radios"> 
        <label for="bankradio-01" class="label_radio_bank" > 
                    <input type="radio" checked="" value="1" id="bankradio-01" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-02" class="label_radio_bank"> 
                    <input type="radio" value="2" id="bankradio-02" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-03" class="label_radio_bank"> 
                    <input type="radio" value="3" id="bankradio-03" name="sample-radio_2" /> <img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-04" class="label_radio_bank"> 
                    <input type="radio" value="4" id="bankradio-04" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-05" class="label_radio_bank"> 
                    <input type="radio"  value="5" id="bankradio-05" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-06" class="label_radio_bank"> 
                    <input type="radio" value="2" id="bankradio-06" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-07" class="label_radio_bank"> 
                    <input type="radio" value="3" id="bankradio-07" name="sample-radio_2" /> <img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-08" class="label_radio_bank"> 
                    <input type="radio" value="4" id="bankradio-08" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-09" class="label_radio_bank"> 
                    <input type="radio"  value="1" id="bankradio-09" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-10" class="label_radio_bank"> 
                    <input type="radio" value="2" id="bankradio-10" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-11" class="label_radio_bank"> 
                    <input type="radio" value="3" id="bankradio-11" name="sample-radio_2" /> <img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-12" class="label_radio_bank"> 
                    <input type="radio" value="4" id="bankradio-12" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-13" class="label_radio_bank"> 
                    <input type="radio" value="1" id="bankradio-13" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-14" class="label_radio_bank"> 
                    <input type="radio" value="2" id="bankradio-14" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-15" class="label_radio_bank"> 
                    <input type="radio" value="3" id="bankradio-15" name="sample-radio_2" /> <img src="images/images_pay/bank_01.jpg" />
                </label> 
        <label for="bankradio-16" class="label_radio_bank"> 
                    <input type="radio" value="4" id="bankradio-16" name="sample-radio_2" /><img src="images/images_pay/bank_01.jpg" />
                </label> 
      </fieldset> 
</div>
</td>
</tr>
</table>