刪除所有選定的選項

Question

我有多個具有相同名稱的輸入，並且只想選擇一個選項。

但是，如果未選中此復選框，則此選項應為null。 當用戶選擇復選框並選擇一個選項然后取消選中時，我遇到了問題。 該選項仍處於選中狀態。 當我取消選中復選框時，我想刪除該名稱的所有選項。

所以我嘗試了$('input[name="customerUIBranch"]').val(null); 但這沒有幫助

 $('#hasCustomerUITab').hide(); $('#customerUI').change(function () { if ($(this).is(":checked")) { $('#hasCustomerUITab').show(); } else { $('#hasCustomerUITab').hide(); $('input[name="customerUIBranch"]').val(null); } }); $('#submit').click(function() { console.log($('input[name="customerUIBranch"]').val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="checkbox checkbox-primary"> <input type="checkbox" id="customerUI" name="hasCustomerUI"> <label for="customerUI">Customer UI</label> </div> <div class="row"> <div class="col-sm-10"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#customerUIContent" id="hasCustomerUITab" style="" aria-expanded="true">Customer UI</a></li> </ul> <div class="tab-content tab-content-border"> <div id="hostContent" class="tab-pane fade"> <div id="customerUIContent" class="tab-pane fade active in"> <div class="scrollableBranches"> <div class="form-group"> <div class="radio radio-info increase-size"> <input type="radio" value="" name="customerUIBranch" id="customerUIBranch1" data-error="Please, choose one option"> <label for="customerUIBranch1">build-setup </label> </div> <div class="radio radio-info increase-size"> <input type="radio" value="" name="customerUIBranch" id="customerUIBranch2" data-error="Please, choose one option"> <label for="customerUIBranch2">master </label> </div> </div> </div> </div> </div> </div> </div> </div> <button id="submit">Submit</button> 

Answer 1

嘗試這個

$('#hasCustomerUITab').hide();


$('#customerUI').change(function () {
        if ($(this).is(":checked")) {
            $('#hasCustomerUITab').show();
        }
        else {
            $('#hasCustomerUITab').hide();
            //this
            $('input[name="customerUIBranch"]').prop('checked', false);
            //or
            $('input[name="customerUIBranch"]').attr("checked", false);
        }
    });

   $('#submit').click(function() {
    console.log($('input[name="customerUIBranch"]').val());

   });

https://jsfiddle.net/h3d7zttj/1/

Answer 2

$('#hasCustomerUITab').hide();


$('#customerUI').change(function () {
        if ($(this).is(":checked")) {
            $('#hasCustomerUITab').show();
        }
        else {
            $('#hasCustomerUITab').hide();
            $('input[name=customerUIBranch]').removeAttr('checked');
        }
    });

   $('#submit').click(function() {
    console.log($('input[name="customerUIBranch"]').val());

   });

Answer 3

您應該更改此行

$('input[name="customerUIBranch"]').val(null);

用這條線

$('input[name="customerUIBranch"]').prop('checked', false);

Answer 4

嘗試這個：

<script>
  jQuery('#hasCustomerUITab').hide();
  $('#customerUI').change(function () {
  var ischecked= $(this).is(':checked');
  if(ischecked){
    $('#hasCustomerUITab').show();
  }
  else {
    $('#hasCustomerUITab').hide();
    $('input[name="customerUIBranch"]').val(null);
    $(":radio").removeAttr("checked");
  }
});

$('#submit').click(function() {
  console.log($('input[name="customerUIBranch"]').val()); 
});