HTML中RadioButton和ShowModalDialog用法

    在项目中可能会遇到这样的情况：

    单击某个按钮后，需要弹出一个对话框来，来让用户有不同的选择，并且，这些备选答案中只是单向选择，不可多选，之后，根据选择的不同方法而进行不同的操作。

    弹出一个对话框来让用户选择不同的选择，在实际中有2中方法，第一种是用<div></div>来做。先把这个做成隐藏的，之后，当有单击事件发生时，再让其显示。这种思路，这里不做太多介绍。第二种就是用子窗口来做。HTML的子窗口就是 ShowModalDialog()。

    因为是只能单向选择，所以，这里就用到了HTML的RadioButton 按钮。

    思路比较简单，直接上代码：

    其一：单击事件弹出子窗口：

 window.showModalDialog("adMetaOpenShow.jsp",window,"status:no;dialogHeight:210px;dialogWidth:360px;help:no");

 
   弹出的子串口如图片。

  子窗口中的代码为：

  <table>
              <tr height="30" align="center">
                      <td> <input type="radio" name="meta" value="1" > 图片 </td>
                      <td> <input type="radio" name="meta" value="2" > 视频 </td>
                      <td> <input type="radio" name="meta" value="3" > 文字 </td>
                      <td> <input type="radio" name="meta" value="4" > 问卷 </td>
              </tr>
              
              <tr height="30" align="right">
                   <td>  <input type="button"  value="确定" οnclick="go()"></td>
                   <td>  <input type="button"  value="取消" οnclick="goBack()"></td>
              </tr>
          </table>

 

  在子窗口中的需要根据不同的选择而有不同的操作，即确定按钮的单击事件为。

  代码：

  function go(){
            var str;
            var flag = false;
            var radioElements = document.getElementsByName("meta");
            //必须选择一个 要添加的素材类型
            for(var i=0;i<radioElements.length;i++){
                if(radioElements[i].checked){
                    flag = true;
                    str =radioElements[i].value;
                    alert(str);
                    
                    if(str == 1){
                       //跳转添加图片页面
                       window.location.href="adContentMgr_addImageMetaRedirect.do";
                    }else if(str == 2){
                       //跳转添加视频页面
                       window.location.href="adContentMgr_addVideoMetaRedirect.do";
                    }else if(str == 3){
                       //跳转添加文字页面
                       window.location.href="adContentMgr_addMessageMetaRedirect.do";
                    }else if(str == 4){
                       //跳转添加问卷页面
                       window.location.href="adContentMgr_addQuestionMetaRedirect.do"
                    }else{
                        window.close();
                    }
                    window.close();
                }
            }
            
            if(!flag){
                alert("不能为空，请确认后，选择要添加的素材类型！");
                return false;
            }
            
        }

     注解：为了保存操作的健全性，如果用户没有选择就单击确定按钮，就必须给出提示。

     就是if(!flag){}

     这里，也可以手动默认哪个按钮是被选中的。

    

      根据不同的选择就可以进行不同的操作了。