单选按钮控制页面部分的显示的流程

最新推荐文章于 2022-08-15 12:13:12 发布

cominglately

最新推荐文章于 2022-08-15 12:13:12 发布

阅读量414

点赞数 1

分类专栏： web 文章标签： php

本文链接：https://blog.csdn.net/cominglately/article/details/76528054

版权

web 专栏收录该内容

135 篇文章 1 订阅

订阅专栏

eg:

<div class="form-group">
     <label class="col-sm-2 control-label">是否输出</label>
     <div class="col-sm-4">
         <label class="radio-inline">
             <input type="radio" name="need_dunning" value="2" class="shouchu_radio" checked>
             否
         </label>
         <label class="radio-inline">
             <input type="radio" name="need_dunning" value="1" class="shouchu_radio">
             是
         </label>
     </div>
 </div>
 <div class="form-group cuishou" style="display: none;">
     <label class="col-sm-2 control-label">APIKEY</label>
         <div class="col-sm-4">
             <input type="text" class="form-control" name="service_key" value="">
         </div>
 </div>
 <div class="form-group cuishou" style="display: none;">
     <label class="col-sm-2 control-label">PASSWORD</label>
     <div class="col-sm-4">
         <input type="text" name="service_secret" class="form-control" value="">
     </div>
 </div>

radio 触发机制

$("input:radio.shouchu_radio").on('change', function(event) {
         if ('1' == $(this).val()) {
             $("div.cuishou").css({
                 display: 'block'
             });
         } else {
             $("div.cuishou").css({
                 display: 'none'
             });
         }
     });