zoukankan      html  css  js  c++  java
  • radio选择

    input标签radio单选

     1 <tr>
     2     <th style="font-weight: bolder;text-align: right;18%" >是否包邮:</th>
     3     <td style="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;18%" >计价方式:</th>
    10     <td style="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("元,&nbsp;&nbsp;&nbsp;每增加");
    31             $("#rulesC").html("件,&nbsp;&nbsp;&nbsp;增加运费");
    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("元,&nbsp;&nbsp;&nbsp;每增加");
    44             $("#rulesC").html("kg,&nbsp;&nbsp;&nbsp;增加运费");
    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("元,&nbsp;&nbsp;&nbsp;每增加");
    57             $("#rulesC").html("m³,&nbsp;&nbsp;&nbsp;增加运费");
    58             $("#ruleNameA").html("首体积(m³)");
    59             $("#ruleNameC").html("续体积(m³)");
    60         }else{
    61             $("#valuationMethods3").attr("checked", false);
    62         }
    63     }
    64 }
    一个95后程序员的自述: 现在的我还年轻,还有激情,要在有限的时间和激情里实现自我价值.
  • 相关阅读:
    构建之法阅读笔记02
    4.7-4.13 第八周总结
    构建之法阅读笔记01
    顶会热词统计
    结对作业-四则运算升级版
    3.31-4.5 第七周总结
    大道至简阅读笔记03
    3.23-3.30 第六周总结
    第7周总结
    人月神话阅读笔记之三
  • 原文地址:https://www.cnblogs.com/zhan1995/p/8522751.html
Copyright © 2011-2022 走看看