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

Question

我有根据用户输入隐藏和显示的单选按钮。如果输入需要更多信息，则必须提供该信息。

如果用户改变主意并决定不回答问题，他们仍然可以处理请求。但是，如果他们之前选择了一个单选按钮，它将保持选中状态，并将提交具有其他必需值和依赖值的错误值。

因此，如果用户改变主意并决定不回答，我需要之前检查的 radio 返回空值。我知道这对你们中的一些人来说可能很容易解决，我将不胜感激任何帮助或指导。谢谢。`

 $(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

我已经更新了你的 Fiddle。 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

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