删除所有选定的选项

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()); 
});