單選按鈕必須返回到默認狀態

Question

我有隱藏的單選按鈕，並根據用戶輸入顯示。如果輸入需要更多信息，則必須提供信息。

如果用戶改變主意並決定不回答問題，他們仍然可以處理請求。但是，如果他們以前選擇了一個單選按鈕，它將保持檢查狀態，並將提交具有其他所需值和相關值的錯誤值。

因此，如果用戶改變主意並決定不回答，我需要先前檢查過的無線電返回空值。我知道這對你們中的一些人來說可能是一個簡單的解決辦法，我會很感激任何幫助或方向。謝謝。'

$(document).ready(function() { 
$primarySub = $("#primarySub").hide(); // cache and hide in the same call 
$primary = $("#primary").hide(); // cache and hide in the same call 
$secondary = $("#secondary").hide(); // cache and hide in the same call 

$("input[name=visibility]").change(function() { 
$("#visibilityTrue").is(':checked') ? $primarySub.show(): $primarySub.hide(); $primary.hide(); $secondary.hide(); 

$("input[name=visibility]").change(function() { 
$("#visibilityFalse").is(':checked') ? $primarySub.hide(): $primarySub.show(); $primary.hide(); $secondary.hide(); 

$("input[name=parentChild]").change(function() { 
$("#primaryTrue").is(':checked') ? $primary.show(): $primary.hide(); 

$("input[name=parentChild]").change(function() { 
$("#primaryFalse").is(':checked') ? $secondary.show(): $secondary.hide(); 
      }); 
      }); 
     }); 
     }); 
    }); 


    <div class="btn-group" data-toggle="buttons"> 
     <p><strong>Visibility</strong></p> 
     <label class="btn btn-default"> 
      <input name="visibility" type="radio" id="visibilityTrue" value="1"> 
     visibilityTrue</label> 
     <label class="btn btn-default"> 
      <input name="visibility" type="radio" id="visibilityFalse" value="0"> 
     visibilityFalse</label> 
    </div> 

    <div id="primarySub" class="animate"> 
     <div class="btn-group" data-toggle="buttons"> 
      <p><strong>Primary Item or Sub Item?</strong></p> 
      <label class="btn btn-default"> 
       <input name="parentChild" type="radio" id="primaryTrue" value="1"> 
      primaryTrue</label> 
      <label class="btn btn-default"> 
      <input name="parentChild" type="radio" id="primaryFalse" value="0"> 
      primaryFalse</label> 
    </div> 
</div> 

<div id="primary" class="animate"> 
    <div class="form-group"> 
    <label for="primary">Choose The Order For Primary Item</label> 
    <select class="form-control" name="primary" id="primary"> 
     <option value="1">Primary First</option> 
     <option value="2">Primary Second</option> 
     <option value="3">Primary Third</option> 
     <option value="4">Primary Fourth</option>       
    </select>      
    <span id="helpBlock" class="help-block">Please Select One</span> 
    </div> 
</div> 

<div id="secondary" class="animate"> 
    <div class="form-group"> 
    <label for="secondary">Please Select One</label> 
    <select class="form-control" name="secondary" id="secondary"> 
     <option value="1">Sub First</option> 
     <option value="2">Sub Second</option> 
     <option value="3">Sub Third</option> 
     <option value="4">Sub Fourth</option>       
    </select>      
    <span id="helpBlock" class="help-block">Please Select One</span> 
    </div> 
</div> 

Answer 1

感謝@Reddy通過簡單地刪除標籤來解決問題我已經將按鈕包裹在了。偉大的工作夥伴！

能見度

   <input name="visibility" type="radio" id="visibilityTrue" autocomplete="off" value="1"> 
         Yes, Make This Visible 

       <input name="visibility" type="radio" id="visibilityFalse" autocomplete="off" value="0"> 
         No, Hide This Page 
      </div> 

      <div id="primarySub" class="animate"> 
       <div class="btn-group" data-toggle="buttons"> 
        <p><strong>Primary Item or Sub Item?</strong></p> 

         <input name="parentChild" type="radio" id="primaryTrue" autocomplete="off" value="1"> 
         Should This Be A Primary Item? 

         <input name="parentChild" type="radio" id="primaryFalse" autocomplete="off" value="0"> 
         Should This Page Be A Sub Item? 
       </div> 
      </div> 

      <div id="primary" class="animate"> 
       <div class="form-group"> 
        <label for="primary">Choose The Order For Primary Item</label> 
        <select class="form-control" name="primary" id="primary"> 
         <option value="1">Primary First</option> 
         <option value="2">Primary Second</option> 
         <option value="3">Primary Third</option> 
         <option value="4">Primary Fourth</option>       
        </select>      
        <span id="helpBlock" class="help-block">Please Select One</span> 
       </div> 
        </div> 

      <div id="secondary" class="animate"> 
       <div class="form-group"> 
        <label for="secondary">Choose The Placement For Secondary Menu Item</label> 
        <select class="form-control" name="secondary" id="secondary"> 
         <option value="1">Sub First</option> 
         <option value="2">Sub Second</option> 
         <option value="3">Sub Third</option> 
         <option value="4">Sub Fourth</option>       
        </select>      
        <span id="helpBlock" class="help-block">Please Select One</span> 
       </div> 
        </div> 
     </form> 

Answer 2

我已經更新了小提琴。 Here check this fiddle< - 已更新

而她的代碼。

$(document).ready(function() { 

    $primarySub = $("#primarySub").hide(); // cache and hide in the same call 
    $primary = $("#primary").hide(); // cache and hide in the same call 
    $secondary = $("#secondary").hide(); // cache and hide in the same call 

    $("#visibilityTrue").change(function() { 
    $(this).is(':checked') ? $primarySub.show(): $primarySub.hide(); $primary.hide(); $secondary.hide(); 
    }); 

    $("#visibilityFalse").change(function() { 
    if($(this).is(':checked')){ 
     $("#primaryTrue").prop('checked', false); 
     $("#primaryFalse").prop('checked', false); 
     $primarySub.hide(); 
    } 
    else{ 
     $primarySub.show(); 
    } 
    $primary.hide(); $secondary.hide(); 
    }); 

    $("#primaryTrue").change(function() { 
    $(this).is(':checked') ? $primary.show(): $primary.hide(); 
    }); 

    $("#primaryFalse").change(function() { 
    $(this).is(':checked') ? $secondary.show(): $secondary.hide(); 
      }); 

}); 

//if visibilityFalse = true, then primaryTrue and primaryFalse must be unchecked 

您有很多函數關閉問題，並將事件綁定到不必要的元素。我已經爲你清理它。讓我知道這是否有幫助