单选按钮必须返回到默认状态

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 

您有很多函数关闭问题，并将事件绑定到不必要的元素。我已经为你清理它。让我知道这是否有帮助