带有复选框的多选选项使用jquery选择和取消选择选项

Question

我有一个带有复选框的多个选项。我正在这样工作 All Batches 选项仅默认选中，其他选项取消选择

• 当我选择 Batch01 选项或其他选项时，All Batches 选项被取消选择

• 当我选择 All Batches 选项时，Batch01 或其他选项被取消选择

问题

• 当我选择 All Batch 选项时，不应取消选择 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>