radio选择

Posted 2020-10-26 采菊东篱下，悠然见南山。

input标签radio单选

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

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

 1 // 修改是否包邮check
 2 function changePostageFree(val){
 3     if(val == 1){
 4         $(\'#postageFree1\').attr(\'checked\', \'true\');
 5         $("#postageFree2").attr("checked",false);
 6         $("#MethodsTR").hide();
 7         $("#ruleTR").hide();
 8         $("#ruleAdd").hide();
 9         $("#ruleName").hide();
10         $(".imgs").hide();
11         
12     }else{
13         $("#postageFree2").attr(\'checked\',\'true\');
14         $(\'#postageFree1\').attr("checked",false);
15         $("#MethodsTR").show();
16         $("#ruleTR").show(); 
17         $("#ruleAdd").show();
18         $("#ruleName").hide();
19         $(".imgs").show();
20     }
21 }
22 // 修改计价方式
23 function changeMethods(num){
24     if(num == 1){
25         if($("#valuationMethods1").prop(\'checked\')){
26             $("#valuationMethods1").attr("checked", true); 
27             $("#valuationMethods2").attr("checked", false);
28             $("#valuationMethods3").attr("checked", false);
29             $("#rulesA").html("件内");
30             $("#rulesB").html("元,   每增加");
31             $("#rulesC").html("件,   增加运费");
32             $("#ruleNameA").html("第一件");
33             $("#ruleNameC").html("续件");
34         }else{
35             $("#valuationMethods1").attr("checked", false);
36         }
37     }else if (num == 2){
38         if( $("#valuationMethods2").prop(\'checked\')){
39             $("#valuationMethods2").attr("checked", true); 
40             $("#valuationMethods1").attr("checked", false);
41             $("#valuationMethods3").attr("checked", false);
42             $("#rulesA").html("kg内");
43             $("#rulesB").html("元,   每增加");
44             $("#rulesC").html("kg,   增加运费");
45             $("#ruleNameA").html("首重量(kg)");
46             $("#ruleNameC").html("续重量(kg)");
47         }else{
48             $("#valuationMethods2").attr("checked", false);
49         }
50     }else{
51         if( $("#valuationMethods3").prop(\'checked\')){
52             $("#valuationMethods3").attr("checked", true); 
53             $("#valuationMethods1").attr("checked", false);
54             $("#valuationMethods2").attr("checked", false);
55             $("#rulesA").html("m³");
56             $("#rulesB").html("元,   每增加");
57             $("#rulesC").html("m³,   增加运费");
58             $("#ruleNameA").html("首体积(m³)");
59             $("#ruleNameC").html("续体积(m³)");
60         }else{
61             $("#valuationMethods3").attr("checked", false);
62         }
63     }
64 }