Question

我有多个复选框。我正在像这样所有批次选项仅在默认情况下处于选中状态，而其他选项则被取消选择

当我选择 Batch01 选项或其他选项时，则取消选择所有批次选项
当我选择所有批次选项时，则取消选择 Batch01 或其他选项

问题

当我选择“ 所有批次”选项时，不应删除 Batch01 或其他选项。

调用点击事件的jQuery脚本。

$(document).ready(function() {
  $("#batchid").change(function() {
    var batchid = $(this).val();
    var str_bat = batchid.toString();
    if (str_bat.search("All") != -1) {
      if (str_bat.search(",") != -1) {
        $('#batchid option[value=All]').prop('selected', false);
        var res1 = str_bat.split(",");
        if (res1[1] != '' && (res1[0] != 'All' || res1[0] == 'All')) {
          $('#batchid option[value=' + res1[1] + ']').prop('selected', true);
          $('select').material_select();
          $('#batchid option[value=All]').prop('selected', false);
          $('select').material_select();
        } else if (res1[0] == 'All' && (res1[1] != '' || res1[1] == '')) {
          $('#batchid option[value=All]').prop('selected', true);
          $('select').material_select();
          $('#batchid option[value=' + res[1] + ']').prop('selected', false);
          $('select').material_select();
        } else {}
      } else {
        alert("ALL Check");
        $("#batchid option").each(function(i) {
          $('#batchid option[value=' + $(this).val() + ']').prop('selected', false);
          $('select').material_select();
        });
        $('#batchid option[value=All]').prop('selected', true);
        $('select').material_select();
      }
    }
    if (str_bat.search(",") != -1) {
      $('#batchid option[value=All]').prop('selected', false);
      var res = str_bat.split(",");
      //alert(res[0]+' '+res[1]);
      if (res[1] != '' && res[0] != 'All') {
        $('#batchid option[value=' + res[1] + ']').prop('selected', true);
        $('select').material_select();
        $('#batchid option[value=All]').prop('selected', false);
        $('select').material_select();
      }
      if (res[0] == 'All' && res[1] == '') {
        $('#batchid option[value=All]').prop('selected', true);
        $('select').material_select();
        $('#batchid option[value=' + res[1] + ']').prop('selected', false);
        $('select').material_select();
      }
    }
  });
});


asp.net aspx engine code

<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field col s3"><label for="batchid">Batch</label>
  <select id="batchid" data-rel="chosen" name="batchid[]" class="form-control" multiple>
    <option value="All" selected>All Batches</option>
    <option value="1" selected>Batch01</option>
    <option value="2" selected>Batch02</option>
  </select>
</div>

Answer 1

您可以使用removeAttr和attr或prop

find("option:selected")将在select中找到所有选定的选项，而removeAttr("selected")将取消选定所有选定的选项。

$("#batchid").change(function(){

  if ($(this).val() == "All")
  {
    $(this).find("option:selected").removeAttr("selected");
    $(this).find('option[value="All"]').prop("selected", true);
  }
  else
  {
    $(this).find('option[value="All"]').removeAttr("selected");
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s3"><label for="batchid">Batch</label>
  <select id="batchid" data-rel="chosen" name="batchid[]" class="form-control" multiple>
    <option value="All" selected>All Batches</option>
    <option value="1" selected>Batch01</option>
    <option value="2" selected>Batch02</option>
  </select>
</div>

带有复选框的多重选择选项，使用jquery

1 个答案: