js 点击触发函数与弹出灰层提交表单 与选择按钮显示语法与单选选中与否展示不同界面

方案一：

 

<a class="join-btn " onclick="test()" >创建联盟</a>

function test(){     alert('登录才能创建联盟！'); }

方案二：

<a class="join-btn" onclick="dispWinAttr(this,'show','1')">创建联盟</a>

function dispWinAttr(thiss,isShow,num){
    if(isShow == 'show'){
         $zhoumanhem('.theme-popover2').fadeIn(100);         $zhoumanhem('.theme-popover-mask2').fadeIn(200);
     }else{
        $zhoumanhem('.theme-popover2').fadeOut(100);         $zhoumanhem('.theme-popover-mask2').fadeOut(200);
    } }



html代码:

 .theme-popover-mask2 {
                    z-index: 9998;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.5);
                    /*opacity: 0.4;*/
                    /*filter: alpha(opacity=40);*/
                    display: none;
                }

 

<div class="theme-popover-mask2" >
    <div class="theme-popover2 form-container warper" style="display: none;z-index:99999;">

        <div class="form-top theme-poptit2">
            <div class="back-close" onclick="dispWinAttr(this,'none')" href="javascript:;" title="关闭" class="close2"></div>
        </div>
      

 

        </script>
        <div id="attr_html1" style="padding:0;">
            <div class="form-box">
                <div class="form-left">
                    <h2>创建联盟表格</h2>
                    <div>

                        <form action="trader_service.php?act=cj_add" method="post" id="form" enctype="multipart/form-data" >
                      </form>
                    </div>

                </div>
                            </div>
        </div>
    </div>
</div>

 

案例三：

效果：

源码：

<div class="input-text-iteam">
                                    <span>
                                        <i class="new-must-input"></i>
                                        会员性质：
                                    </span>
                                <ul class="radio-list">
                                    <li>
                                        <input name="user_typem" type="radio" value="1" class="input-radio" checked="checked" onclick="change_goodstype(1)" /><label>企业会员</label>
                                    </li>
                                    <li>
                                        <input name="user_typem" type="radio" value="0" class="input-radio" onclick="change_goodstype(0)"/><label>个人会员</label>

                                    </li>
                                    
                                </ul>
                            </div>

 function change_goodstype(id)
           {
               if(id==1)
               {
                   document.getElementById('qiyetypehtml').style.display ='block';
                   document.getElementById('gerentypehtml').style.display ='none';
        
               }
               else
               {
                   document.getElementById('qiyetypehtml').style.display ='none';
                   document.getElementById('gerentypehtml').style.display ='block';
                  
               }
           }

 

 

 <div id="qiyetypehtml" >


                                <div class="input-text-iteam"  style="height:100px !important; ">
                                        <span>
                                            <i class="new-must-input">*</i>
                                            公司简介：
                                        </span>
                                    <textarea  type="text" name="union_desc" id="description" maxlength="300" cols="30" rows="10" class="ve-form"
                                              placeholder="写下您的真实公司联盟需求，包括联盟优势、联盟特色、品牌等，收到后我们会立即给您回电确认，剩下的就交给我们吧。"
                                              required data-msg-required="联盟介绍不能为空" data-rule-gt="true" style="height:100px;" >

                                    </textarea>

                                </div>
                                <div class="input-text-iteam">
                                    <span>
                                        <i class="new-must-input">*</i>
                                        联系邮箱：
                                    </span>

                                    <input type="text" name="email" id="email" value="" class="ve-form cl_input input-tex" required data-msg-required="不能为空" data-rule-gt="true" >
                                </div>

                                {if $user_type eq 1}

                                {else}



                                <!--------------------------------------------企业资质start--------------------------------------->

                                <div class="input-text-iteam">
                                    <span>
                                        <i class="new-must-input"></i>
                                        三证合一：
                                    </span>

                                    <input type="file" name="business_license" />
                                </div>

                                <!--------------------------------------------企业资质end--------------------------------------->
                                {/if}

                            </div>




                            <div id="gerentypehtml" style="display: none;">


                                <div class="input-text-iteam"  style="height:100px !important; ">
                                    <span>
                                        <i class="new-must-input">*</i>
                                        个人简介：
                                    </span>
                                <textarea  type="text" name="union_user_desc" id="description" maxlength="300" cols="30" rows="10" class="ve-form"
                                           placeholder="写下您的真实联盟个人需求，包括联盟优势、联盟特色、品牌等，收到后我们会立即给您回电确认，剩下的就交给我们吧。"
                                           required data-msg-required="联盟介绍不能为空" data-rule-gt="true" style="height:100px;" >

                                </textarea>

                                </div>


                            </div>

 

方案四：单选选中与否展示不同界面


 

<input type="checkbox" onClick="sanheyiclick($(this).attr('checked'))" id="nothreecheck" />非三证合一请点击 

<br/>

  <script>
    function sanheyiclick(attr){
             if(attr==true){
                 $('.feisanzheng').show();
             }else{
                 $('.feisanzheng').hide();
             }
          }
  
  </script>
                    
                    
                    <div class="feisanzheng" style="display:none" >
                    组织机构代码证
                    </div>