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

我已经更新了你的小提琴。 Here check this fiddle ＆lt; - 更新

她的代码。

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

您有很多功能关闭问题，并将事件绑定到不必要的元素。我已经为你清理过了。如果有帮助，请告诉我

Answer 2

感谢@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>

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

2 个答案: