1. 首页
  2. 问答
  3. 启用基于单选按钮选择复选框

启用基于单选按钮选择复选框

2016-11-19 133 views
0

我有复选框的集团内树视图（引导） 我试图从每一个在顶部单选按钮，显示创建和隐藏功能特异性复选框启用基于单选按钮选择复选框

一切我”至今尝试过的失败了。

我有5个单选按钮： -

  1. 单选按钮1个显示所有复选框与ID匹配FCB & FCTK - 隐藏 其余
  2. 单选按钮2只显示所有复选框与ID匹配FCB - 隐藏REST
  3. 单选按钮3只显示所有复选框与ID匹配FCTK-隐藏REST
  4. 单选按钮4显示所有的复选框
  5. 单选按钮5我会添加新的复选框，他可以显示所有选项 和新添加的复选框

任何想法如何正确地做到这一点？

我有一个想法，但我失败了，当我试图做到这一点：

我觉得做一个阵列，每个复选框的ID，然后搜索文档元素和创建foreach循环，这可能吗？

<!DOCTYPE HTML> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> --> 

     <title>" TZ Generator</title> 
    </head> 

    <body> 
     <form class="form-horizontal" action="ConstructorMain.php" method="post"> 
      <fieldset> 

       <!-- Form Name --> 
       <!-- <legend>Documents Generator</legend>--> 

       <nav class="navbar navbar-default no-margin"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
          <div class="navbar-header fixed-brand"> 
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle"> 
            <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 
           </button> 
           <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> " OTSP Team</a> 
          </div><!-- navbar-header--> 
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
             <ul class="nav navbar-nav"> 
              <li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li> 
             </ul> 
          </div><!-- bs-example-navbar-collapse-1 --> 
       </nav> 
       <!-- Text input--> 
       <div class="form-group"> 
        <label class="col-md-4 control-label" for="filename">Company Name</label> 
        <div class="col-md-4"> 
         <input id="filename" name="filename" type="text" placeholder="" class="form-control input-md" required=""> 
         <span class="help-block">File name for the generated file</span> 
        </div> 
       </div> 

       <!-- Certified Or Non --> 
       <div class="form-group"> 
        <label class="col-md-4 control-label" for="type">Product Type</label> 
        <div class="col-md-4"> 
         <div class="radio"> 
          <label for="type-0"> 
           <input type="radio" name="type" id="type-0" onchange="checkcert();" value="cert"> Certified " Products 
          </label> 
         </div> 
         <div class="radio"> 
          <label for="type-3"> 
           <input type="radio" name="type" id="type-3" onchange="checkcertFCB();" value="certFCB"> Certified " Products By FCB 
          </label> 
         </div> 
         <div class="radio"> 
          <label for="type-4"> 
           <input type="radio" name="type" id="type-4" onchange="checkcertFCTK();" value="certFCTK"> Certified " Products By FCTK 
          </label> 
         </div>     
         <div class="radio"> 
          <label for="type-1"> 
           <input type="radio" name="type" id="type-1" onchange="checkcertNON();" value="non"> Non-Certified " Product 
          </label> 
         </div> 
         <div class="radio"> 
          <label for="type-2"> 
           <input type="radio" name="type" id="type-2" onchange="checkcertUNI();" value="full"> Universal 
          </label> 
         </div> 
        </div> 
       </div> 

       <!-- AV & CC --> 
       <div class="form-group"> 
        <label class="col-md-4 control-label" for="avcc[]">Protection Type</label> 
        <div class="col-md-4"> 
         <div class="checkbox"> 
          <label for="avcc-0"> 
           <input type="checkbox" name="avcc-0" id="avcc-0[]" value="AV.docx"> Anti-virus 
          </label> 
         </div> 
         <div class="checkbox"> 
          <label for="avcc-1"> 
           <input type="checkbox" name="avcc-1" id="avcc-1[]" value="CC.docx"> Control Center 
          </label> 
         </div> 
        </div> 
       </div> 

       <!-- Product Line Tree New --> 
       <br></br> 
       <div class="form-group"> 
        <label class="col-md-4 control-label" for="ostype">Operating System Platform</label> 
        <div class="col-md-4"> 
         <div id="selection"> 
          <ul>  <!-- DSS --> 
           <li> 
            <input type="checkbox" name="DSS" id="DSS-0[]" value="DSS-TXT.docx"> 
            <label for="DSS">DSS :</label> 
            <ul> 
             <li id="DSS-1-tree"> 
              <input type="checkbox" name="DSS-1" id="DSS-1[]" value="DSS-WIN.docx"> 
              <label for="DSS-1">Windows</label> 
             </li> 
             <li id="DSS-3-tree"> 
              <input type="checkbox" name="DSS-3" id="DSS-3[]" value="DSS-WIN-CERT-FCB.docx"> 
              <label for="DSS-3">Windows CERT-FCB</label> 
             </li>   
             <li id="DSS-4-tree"> 
              <input type="checkbox" name="DSS-4" id="DSS-4[]" value="DSS-WIN-CERT-FCTK.docx"> 
              <label for="DSS-4">Windows CERT-FCTK</label> 
             </li>         
             <li id="DSS-2-tree"> 
              <input type="checkbox" name="DSS-2" id="DSS-2[]" value="DSS-LINUX.docx"> 
              <label for="DSS-2">Linux</label> 
             </li> 
             <li id="DSS-5-tree"> 
              <input type="checkbox" name="DSS-5" id="DSS-5[]" value="DSS-LINUX-CERT-FCB.docx"> 
              <label for="DSS-5">Linux CERT-FCB</label> 
             </li> 
             <li id="DSS-6-tree"> 
              <input type="checkbox" name="DSS-6" id="DSS-6[]" value="DSS-LINUX-CERT-FCTK.docx"> 
              <label for="DSS-6">Linux CERT-FCTK</label> 
             </li>         
            </ul> 
           </li> 
           <br></br> 
           <li> <!-- SSS --> 
            <input type="checkbox" name="SSS" id="SSS-0[]" value="SSS-TEXT.docx"> 
            <label for="SSS">SSS :</label> 
            <ul> 
             <li id="SSS-1-tree"> 
              <input type="checkbox" name="SSS-1" id="SSS-1[]" value="SSS-WIN.docx"> 
              <label for="SSS-1">Windows</label> 
             </li> 
             <li id="SSS-3-tree"> 
              <input type="checkbox" name="SSS-3" id="SSS-3[]" value="SSS-WIN-CERT-FCB.docx"> 
              <label for="SSS-3">Windows CERT-FCB</label> 
             </li>    
             <li id="SSS-5-tree"> 
              <input type="checkbox" name="SSS-5" id="SSS-5[]" value="SSS-WIN-CERT-FCTK.docx"> 
              <label for="SSS-5">Windows CERT-FCTK</label> 
             </li>         
             <li id="SSS-2-tree"> 
              <input type="checkbox" name="SSS-2" id="SSS-2[]" value="SSS-LINUX.docx"> 
              <label for="SSS-2">Linux</label> 
             </li> 
             <li id="SSS-4-tree"> 
              <input type="checkbox" name="SSS-4" id="SSS-4[]" value="SSS-LINUX-CERT-FCB.docx"> 
              <label for="SSS-4">Linux CERT-FCB</label> 
             </li> 
             <li id="SSS-6-tree"> 
              <input type="checkbox" name="SSS-6" id="SSS-6[]" value="SSS-LINUX-CERT-FCTK.docx"> 
              <label for="SSS-6">Linux CERT-FCTK</label> 
             </li>         
            </ul> 
           </li> 
           <br></br> 
           <li> <!-- MSS --> 
            <input type="checkbox" name="MSS" id="MSS-0[]" value="MSS-TXT.docx"> 
            <label for="MSS">MSS :</label> 
            <ul> 
             <li id="MSS-1-tree"> 
              <input type="checkbox" name="MSS-1" id="MSS-1[]" value="MSS-LINUX.docx"> 
              <label for="MSS-1">Unix Mail Server </label> 
             </li> 
             <li id="MSS-5-tree"> 
              <input type="checkbox" name="MSS-5" id="MSS-5[]" value="MSS-LINUX-CERT-FCB.docx"> 
              <label for="MSS-5">Unix Mail Server CERT-FCB</label> 
             </li> 
             <li id="MSS-6-tree"> 
              <input type="checkbox" name="MSS-6" id="MSS-6[]" value="MSS-LINUX-CERT-FCTK.docx"> 
              <label for="MSS-6">Unix Mail Server CERT-FCTK</label> 
             </li>         
             <li id="MSS-2-tree"> 
              <input type="checkbox" name="MSS-2" id="MSS-2[]" value="MSS-EXCH.docx"> 
              <label for="MSS-2">MS Exchange</label> 
             </li> 
             <li id="MSS-7-tree"> 
              <input type="checkbox" name="MSS-7" id="MSS-7[]" value="MSS-EXCH-CERT-FCB.docx"> 
              <label for="MSS-7">MS Exchange CERT-FCB</label> 
             </li> 
             <li id="MSS-8-tree"> 
              <input type="checkbox" name="MSS-8" id="MSS-8[]" value="MSS-EXCH-CERT-FCTK.docx"> 
              <label for="MSS-8">MS Exchange CERT-FCTK</label> 
             </li>         
             <li id="MSS-3-tree"> 
              <input type="checkbox" name="MSS-3" id="MSS-3[]" value="MSS-LOUTS.docx"> 
              <label for="MSS-3">Lotus</label> 
              <ul> 
               <li id="MSS-3-1-tree"> 
                <input type="checkbox" name="MSS-3-1" id="MSS-3-1[]" value="MSS-LOUTS-WIN.docx"> 
                <label for="MSS-3-1">Lotus For Windows</label> 
               </li> 
              </ul> 
              <ul> 
               <li id="MSS-3-2-tree"> 
                <input type="checkbox" name="MSS-3-2" id="MSS-3-2[]" value="MSS-LOUTS-LINUX.docx"> 
                <label for="MSS-3-2">Lotus For Linux</label> 
               </li> 
              </ul> 
             </li> 
             <li id="MSS-4-tree"> 
              <input type="checkbox" name="MSS-4" id="MSS-4[]" value="MSS-KERIO-TEXT.docx"> 
              <label for="MSS-4">Kerio</label> 
              <ul> 
               <li id="MSS-4-1-tree"> 
                <input type="checkbox" name="MSS-4-1" id="MSS-4-1[]" value="MSS-KERIO-WIN.docx"> 
                <label for="MSS-4-1">Kerio For Windows</label> 
               </li> 
              </ul> 
              <ul> 
               <li id="MSS-4-2-tree"> 
                <input type="checkbox" name="MSS-4-2" id="MSS-4-2[]" value="MSS-KERIO-LINUX.docx"> 
                <label for="MSS-4-2">Kerio For Linux</label> 
               </li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
           <br></br> 
           <li> <!-- GSS --> 
            <input type="checkbox" name="GSS" id="GSS-0[]" value="GSS-TEXT.docx"> 
            <label for="GSS">GSS :</label> 
            <ul> 
             <li id="GSS-1-tree"> 
              <input type="checkbox" name="GSS-1" id="GSS-1[]" value="GSS-Kerio-Winroute.docx"> 
              <label for="GSS-1">Kerio Winroute</label> 
             </li> 
             <li id="GSS-2-tree"> 
              <input type="checkbox" name="GSS-2" id="GSS-2[]" value="GSS-UNIX.docx"> 
              <label for="GSS-2">Unix gateways</label> 
             </li> 
             <li id="GSS-6-tree"> 
              <input type="checkbox" name="GSS-6" id="GSS-6[]" value="GSS-UNIX-CERT-FCB.docx"> 
              <label for="GSS-6">Unix gateways CERT-FCB</label> 
             </li> 
             <li id="GSS-7-tree"> 
              <input type="checkbox" name="GSS-7" id="GSS-7[]" value="GSS-UNIX-CERT-FCTK.docx"> 
              <label for="GSS-7">Unix gateways CERT-FCTK</label> 
             </li>         
             <li id="GSS-3-tree"> 
              <input type="checkbox" name="GSS-3" id="GSS-3[]" value="GSS-Qbik.docx"> 
              <label for="GSS-3">Qbik</label> 
             </li> 
             <li id="GSS-4-tree"> 
              <input type="checkbox" name="GSS-4" id="GSS-4[]" value="GSS-MIME.docx"> 
              <label for="GSS-4">MIMEsweeper</label> 
             </li> 
             <li id="GSS-5-tree"> 
              <input type="checkbox" name="GSS-5" id="GSS-5[]" value="GSS-ISATMG.docx"> 
              <label for="GSS-5">MS ISA Server & Forefront TMG</label> 
             </li> 
             <li id="GSS-8-tree"> 
              <input type="checkbox" name="GSS-8" id="GSS-8[]" value="GSS-ISATMG-CERT-FCB.docx"> 
              <label for="GSS-8">MS ISA Server & Forefront TMG CERT-FCB</label> 
             </li> 
             <li id="GSS-9-tree"> 
              <input type="checkbox" name="GSS-9" id="GSS-9[]" value="GSS-ISATMG-CERT-FCTK..docx"> 
              <label for="GSS-5">MS ISA Server & Forefront TMG CERT-FCTK</label> 
             </li>         
            </ul> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 


       <!-- Button (Double) --> 
       <div class="form-group"> 
        <label class="col-md-4 control-label" for="generate">Confirm Slection</label> 
        <div class="col-md-8"> 
         <button id="generate" name="generate" class="btn btn-primary">Generate File</button> 
         <button id="clearselection" name="clearselection" class="btn btn-inverse" type="reset">Reset Selection</button> 
        </div> 
       </div> 

      </fieldset> 
     </form> 

     <!-- Tree Code --> 
     <script> 
      $('input[type="checkbox"]').change(function(e) { 

       var checked = $(this).prop("checked"), 
        container = $(this).parent(), 
        siblings = container.siblings(); 

       container.find('input[type="checkbox"]').prop({ 
        indeterminate: false, 
        checked: checked 
       }); 

       function checkSiblings(el) { 

        var parent = el.parent().parent(), 
         all = true; 

        el.siblings().each(function() { 
         return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); 
        }); 

        if (all && checked) { 

         parent.children('input[type="checkbox"]').prop({ 
          indeterminate: false, 
          checked: checked 
         }); 

         checkSiblings(parent); 

        } else if (all && !checked) { 

         parent.children('input[type="checkbox"]').prop("checked", checked); 
         parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0)); 
         checkSiblings(parent); 

        } else { 

         el.parents("li").children('input[type="checkbox"]').prop({ 
          indeterminate: true, 
          checked: true 
         }); 

        } 

       } 

       checkSiblings(container); 
      }); 
     </script> 

     <!-- Certified Button FULL CERT --> 
     <script> 
      function checkcert() { 
       var el = document.getElementById("type-0"); 
       if (el.checked) { 
        $('#DSS-4-tree').show(); 
        $("#DSS-3-tree").show(); 
        $("#DSS-5-tree").show(); 
        $("#DSS-6-tree").show(); 
        $("#SSS-3-tree").show(); 
        $("#SSS-5-tree").show(); 
        $("#SSS-4-tree").show(); 
        $("#SSS-6-tree").show(); 
        $("#MSS-5-tree").show(); 
        $("#MSS-6-tree").show(); 
        $("#SSS-7-tree").show(); 
        $("#MSS-8-tree").show(); 
        $("#GSS-6-tree").show(); 
        $("#GSS-7-tree").show(); 
        $("#GSS-8-tree").show(); 
        $("#GSS-9-tree").show(); 
        } 
        else { 
        $("#DSS-4-tree").hide(); 
        $("#DSS-3-tree").hide(); 
        $("#DSS-5-tree").hide(); 
        $("#DSS-6-tree").hide(); 
        $("#SSS-3-tree").hide(); 
        $("#SSS-5-tree").hide(); 
        $("#SSS-4-tree").hide(); 
        $("#SSS-6-tree").hide(); 
        $("#MSS-5-tree").hide(); 
        $("#MSS-6-tree").hide(); 
        $("#SSS-7-tree").hide(); 
        $("#MSS-8-tree").hide(); 
        $("#GSS-6-tree").hide(); 
        $("#GSS-7-tree").hide(); 
        $("#GSS-8-tree").hide(); 
        $("#GSS-9-tree").hide(); 
        } 
      } 
     </script> 

     <!-- Certified Button CERT FCB --> 
     <script> 
      function checkcertFCB() { 
       var el = document.getElementById("type-3"); 
       if (el.checked) { 
        $('#DSS-3-tree').show(); 
      } 

      } 
     </script> 
     <!-- Certified Button CERT FCTK --> 
     <script> 
      function checkcertFCTK() { 
       var el = document.getElementById("type-4"); 
       if (el.checked) { 
       $('#DSS-4-tree').show(); 

       } 
      } 
     </script> 
     <!-- Non Certified Button --> 
     <script> 
      function checkcertNON() { 
       var el = document.getElementById("type-1"); 
       if (el.checked) { 
        $('#MSS-3-tree').show(); 

       } 
      } 
     </script> 
     <!-- Universal Radio Button Selection --> 
     <script> 
      function checkcertUNI() { 
       var el = document.getElementById("type-2"); 
       if (el.checked) 
        $('#').show(); 
       else 
        $('#').hide(); 
      } 
     </script> 
     <!-- No Space Allowed in Input Text --> 
     <script> 
     $("input#filename").on({ 
       keydown: function(e) { 
       if (e.which === 32) 
        return false; 
       }, 
       change: function() { 
       this.value = this.value.replace(/\s/g, ""); 
       } 
      }); 
     </script> 


</body>

来源

2016-11-19 Ti2

回答

1

，这是一个非常大的代码来看看。如果我经历你所做的事情，这将需要很长时间。所以我会给你一个想法，你如何能够实现你想要的。以下表格

<form > 
<label><input type="radio" name="aa" value="cert" />fcb FCTK</label> 
<label><input type="radio" name="aa" value="certFCB" />fcb</label> 
<label><input type="radio" name="aa" value="certFCTK" />FCTK</label> 
<label><input type="radio" name="aa" value="non" />none</label> 
<br /> 
<br /> 

<label class="all fcb"><input type="checkbox" name="chk[]" class="all fcb" />fcb 1</label><br /> 
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 1</label><br /> 
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 2</label><br /> 
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 2</label><br /> 
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 3</label><br /> 
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 3</label><br /> 
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 4</label><br /> 
</form>

JS

$('input[type="radio"]').change(function(e) { 
      $(".all").hide(); 
     var a = $(this).val(); 
     switch(a) { 
     case 'cert': 
      $(".fcb").show(); 
      $(".FCTK").show(); 
      break; 
     case 'certFCB': 
      $(".fcb").show(); 
      break; 
     case 'certFCTK': 
      $(".FCTK").show(); 
      break; 
     case 'non': 
     default: 
      $(".all").hide();   
     } 
})

CSS

.all{ 
    display:none; 
}

这种解决方案，您所期待的。 working jsfiddle链接https://jsfiddle.net/vL423ncp/

来源

2016-11-19 17:34:24 reza

+0

非常感谢，代码完全按照你所说的做，但它并没有隐藏自己从树中的复选框，它只隐藏复选框的文本，是否有任何可能的方法来隐藏盒子它自我？看看你的自我https://jsfiddle.net/w3xw3o3f/ – Ti2

+0

我添加了类不仅标签，但李标签它自己，看起来像它的工作:)非常感谢，我会给你声望，但我需要2点做到这一点:)再次感谢 – Ti2

+0

它隐藏复选框是正确的，但价值仍然加载到子树:(任何想法？ – Ti2

相关问题

 相关问题