根據單選按鈕選擇切換子類別div

我使用top answer to this question構建了一個表單，並將其與文件上傳一起輸入工作表。現在我又打了另一面牆。根據單選按鈕選擇切換子類別div

我有類別和子類別。我希望這些子類別只在他們的父類別被選中時才顯示出來。我只是無法弄清楚A）我需要把代碼（在我們的網站上是正確的HTML），我試着把它放在HTML文件和Code.gs文件中，或者B）如果我使用的代碼甚至是正確的。

Here's the form - 在「合作社類別」是父類，我已經隱藏層爲每個類別將舉行「兒童類」

HTML：

<script> 
    // Javascript function called by "submit" button handler, 
    // to show results. 
    function updateOutput(resultHtml) { 
    toggle_visibility('inProgress'); 
    var outputDiv = document.getElementById('output'); 
    outputDiv.innerHTML = resultHtml; 
    } 

    // From blog.movalog.com/a/javascript-toggle-visibility/ 
    function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
    } 
</script> 

<div id="formDiv"> 
<!-- Form div will be hidden after form submission --> 
<form id="myForm"> 

    Name: <input name="name" type="text" /><br/> 
    Co-Op Amount: <input name="amount" type="text" /><br/> 
    Co-Op Split:<br /> 
    <input type="radio" name="split" value="100%">100&#37;<br> 
    <input type="radio" name="split" value="50/50">50/50<br> 
    <input type="radio" name="split" value="75/25">75/25<br> 
    Other: <input type="text" name="split" /><br /> 
    Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br /> 
    Brand: 
    <select name="brand"> 
    <option>Select Option</option> 
    <option>Bluebird</option> 
    <option>Brown</option> 
    <option>Ferris</option> 
    <option>Giant Vac</option> 
    <option>Honda</option> 
    <option>Hurricane</option> 
    <option>Little Wonder</option> 
    <option>RedMax</option> 
    <option>SCAG</option> 
    <option>Snapper Pro</option> 
    <option>Sno-Way</option> 
    <option>SnowEx</option> 
    <option>Wright</option> 
    <option>Ybravo</option> 
    </select><br/> 
    Co-Op Category:<br /> 
    <input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br /> 
    <input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br /> 
    <input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br /> 
    <input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br /> 
    <input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br /> 
    <input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br /> 
    Other: <input type="text" id="other" name="category" /><br /> 

    <div class="dealer box" style="display: none;">DEALER</div> 
    <div class="online box" style="display: none;">ONLINE</div> 
    <div class="meetings box" style="display: none;">MEETINGS</div> 
    <div class="advertising box" style="display: none;">ADVERTISING</div> 
    <div class="pricing box" style="display: none;">PRICING</div> 
    <div class="correspondence box" style="display: none;">CORRESPONDENCE</div> 


    Email: <input name="email" type="text" /><br/> 
    Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/> 
    School Schedule (Image Files Only): <input name="myFile" type="file" /><br/> 
    <input type="button" value="Submit" 
     onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress'); 
     google.script.run 
      .withSuccessHandler(updateOutput) 
      .processForm(this.parentNode)" /> 
</form> 
</div> 

<div id="inProgress" style="display: none;"> 
<!-- Progress starts hidden, but will be shown after form submission. --> 
Uploading. Please wait... 
</div> 

<div id="output"> 
    <!-- Blank div will be filled with "Thanks.html" after form submission. --> 
</div>

Code.gs：

var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk'; 
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc"; 

function doGet(e) { 
    var template = HtmlService.createTemplateFromFile('Form.html'); 
    template.action = ScriptApp.getService().getUrl(); 
    return template.evaluate(); 
} 


function processForm(theForm) { 
    var fileBlob = theForm.myFile; 
    var folder = DriveApp.getFolderById(folderId); 
    var doc = folder.createFile(fileBlob); 

    // Fill in response template 
    var template = HtmlService.createTemplateFromFile('Thanks.html'); 
    var name = template.name = theForm.name; 
    var amount = template.amount = theForm.amount; 
    var split = template.split = theForm.split; 
    var reason = template.reason = theForm.split; 
    var brand = template.brand = theForm.brand; 
    var category = template.category = theForm.category; 
    var message = template.message = theForm.message; 
    var email = template.email = theForm.email; 
    var fileUrl = template.fileUrl = doc.getUrl(); 

    // Record submission in spreadsheet 
    var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0]; 
    var lastRow = sheet.getLastRow(); 
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 9).setValues([[name,amount,split,reason,category,brand,message,email,fileUrl]]); 

    // Return HTML text for display in page. 
    return template.evaluate().getContent(); 
} 

//Toggle Secondary Categories 
function(){ 
    $('input[type="radio"]').click(function(){ 
     if($(this).attr("id")=="dealer"){ 
      $(".box").not(".dealer").hide(); 
      $(".dealer").show(); 
     } 
     if($(this).attr("id")=="online"){ 
      $(".box").not(".online").hide(); 
      $(".online").show(); 
     } 
     if($(this).attr("id")=="advertising"){ 
      $(".box").not(".advertising").hide(); 
      $(".advertising").show(); 
     } 
     if($(this).attr("id")=="pricing"){ 
      $(".box").not(".pricing").hide(); 
      $(".pricing").show(); 
     } 
     if($(this).attr("id")=="correspondence"){ 
      $(".box").not(".correspondence").hide(); 
      $(".correspondence").show(); 
     } 
     if($(this).attr("id")=="meetings"){ 
      $(".box").not(".meetings").hide(); 
      $(".meetings").show(); 
     } 
     if($(this).attr("id")=="other"){ 
      $(".box").not(".other").hide(); 
      $(".other").show(); 
     } 
    }); 
};

這一點特別是在那裏我遇到了問題：

//Toggle Secondary Categories 
    function(){ 
     $('input[type="radio"]').click(function(){ 
      if($(this).attr("id")=="dealer"){ 
       $(".box").not(".dealer").hide(); 
       $(".dealer").show(); 
      } 
      if($(this).attr("id")=="online"){ 
       $(".box").not(".online").hide(); 
       $(".online").show(); 
      } 
      if($(this).attr("id")=="advertising"){ 
       $(".box").not(".advertising").hide(); 
       $(".advertising").show(); 
      } 
      if($(this).attr("id")=="pricing"){ 
       $(".box").not(".pricing").hide(); 
       $(".pricing").show(); 
      } 
      if($(this).attr("id")=="correspondence"){ 
       $(".box").not(".correspondence").hide(); 
       $(".correspondence").show(); 
      } 
      if($(this).attr("id")=="meetings"){ 
       $(".box").not(".meetings").hide(); 
       $(".meetings").show(); 
      } 
      if($(this).attr("id")=="other"){ 
       $(".box").not(".other").hide(); 
       $(".other").show(); 
      } 
     }); 
    };

來源

2016-03-02 crossbeats

jQuery代碼無法進入Code.gs文件。它需要位於''腳本標記內。您可以添加一個'console.log（'it ran！'）'語句來測試是否有任何內容正在運行。您需要打開瀏覽器開發者控制檯，並確保控制檯選項卡處於活動狀態。在Chrome中，你點擊了f12鍵。 –

@SandyGood我在控制檯選項卡中添加了對

相關問題