radio选择

input标签radio单选

 <tr>
     <th style="font-weight: bolder;text-align: right;width:18%" >是否包邮：</th>
     <td style="width:32%; text-align:left;">
         <input id="postageFree1" type="radio" name="postage.postageFree" value="1" onclick="changePostageFree(this.value)" checked="checked"/>包邮
         <input id="postageFree2" type="radio" name="postage.postageFree" value="2" onclick="changePostageFree(this.value)" />自定义运费&nbsp;&nbsp;&nbsp;
     </td>
 </tr>
 <tr    id="MethodsTR" hidden="hidden">
     <th style="font-weight: bolder;  text-align: right;width:18%" >计价方式：</th>
     <td style="width:32%; text-align:left;">
         <input id="valuationMethods1" type="radio" name="postage.valuationMethods" value="1"   onclick="changeMethods(this.value)" />按件数&nbsp;&nbsp;&nbsp;
         <input id="valuationMethods2" type="radio" name="postage.valuationMethods" value="2"  checked="checked" onclick="changeMethods(this.value)" />按重量&nbsp;&nbsp;&nbsp;
         <input id="valuationMethods3" type="radio" name="postage.valuationMethods" value="3" onclick="changeMethods(this.value)"/>按体积
     </td>
 </tr>
 <tr id="ruleTR" hidden="hidden">
     <th width="18%" align="right">默认规则:&nbsp;&nbsp;</th>
     <td align="left" colspan="3">&nbsp;&nbsp;
         <input type="text" id="defaultRulesA" name="postage.defaultRulesA" />
         <span id="rulesA" >kg内</span>&nbsp;&nbsp;&nbsp;
         <input type="text" id="defaultRulesB" name="postage.defaultRulesB" />
         <span id="rulesB">元,&nbsp;&nbsp;&nbsp;每增加</span>
         <input type="text" id="defaultRulesC" name="postage.defaultRulesC" />
         <span id="rulesC">kg,&nbsp;&nbsp;&nbsp;增加运费</span>
         <input type="text" id="defaultRulesD" name="postage.defaultRulesD" />元
     </td>
 </tr>

根据是否包邮显示不同的计价方式，根据不同的计价方式展示不同的ABCD值

 // 修改是否包邮check
 function changePostageFree(val){
     if(val == 1){
         $('#postageFree1').attr('checked', 'true');
         $("#postageFree2").attr("checked",false);
         $("#MethodsTR").hide();
         $("#ruleTR").hide();
         $("#ruleAdd").hide();
         $("#ruleName").hide();
         $(".imgs").hide();

     }else{
         $("#postageFree2").attr('checked','true');
         $('#postageFree1').attr("checked",false);
         $("#MethodsTR").show();
         $("#ruleTR").show();
         $("#ruleAdd").show();
         $("#ruleName").hide();
         $(".imgs").show();
     }
 }
 // 修改计价方式
 function changeMethods(num){
     if(num == 1){
         if($("#valuationMethods1").prop('checked')){
             $("#valuationMethods1").attr("checked", true);
             $("#valuationMethods2").attr("checked", false);
             $("#valuationMethods3").attr("checked", false);
             $("#rulesA").html("件内");
             $("#rulesB").html("元,   每增加");
             $("#rulesC").html("件,   增加运费");
             $("#ruleNameA").html("第一件");
             $("#ruleNameC").html("续件");
         }else{
             $("#valuationMethods1").attr("checked", false);
         }
     }else if (num == 2){
         if( $("#valuationMethods2").prop('checked')){
             $("#valuationMethods2").attr("checked", true);
             $("#valuationMethods1").attr("checked", false);
             $("#valuationMethods3").attr("checked", false);
             $("#rulesA").html("kg内");
             $("#rulesB").html("元,   每增加");
             $("#rulesC").html("kg,   增加运费");
             $("#ruleNameA").html("首重量(kg)");
             $("#ruleNameC").html("续重量(kg)");
         }else{
             $("#valuationMethods2").attr("checked", false);
         }
     }else{
         if( $("#valuationMethods3").prop('checked')){
             $("#valuationMethods3").attr("checked", true);
             $("#valuationMethods1").attr("checked", false);
             $("#valuationMethods2").attr("checked", false);
             $("#rulesA").html("m³");
             $("#rulesB").html("元,   每增加");
             $("#rulesC").html("m³,   增加运费");
             $("#ruleNameA").html("首体积(m³)");
             $("#ruleNameC").html("续体积(m³)");
         }else{
             $("#valuationMethods3").attr("checked", false);
         }
     }
 }