使用jQuery在带有复选框的选择选项中选择和取消选择问题

Question

我使用的是Materialized主题，其中带有复选框的select选项仅在select标签中添加多个属性。

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

我正在这样做，当用户选择所有批次时，如果选择了其他选项，则它将被取消选择；而当选择 Batch01 或其他选项时，则所有批次将被取消选择

这是带有复选框的select选项的布局图像

当我选择 Batch01 或其他选项时，默认选择所有批次，然后取消选择所有批次，并 Batch01 或其他选项选择。

问题是，当选择所有批次时，未取消选择 Batch01

这是jquery的代码

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

如果我警报（str_bat）;然后像这样的数组格式All，1,2

Answer 1

您要这样做吗？

$(document).ready(function(){

  //when document is ready All Batches option is only selected bydefault and other options are deselect.
  $('#batchid > option[value="All"]').prop('selected',true); 
  $('#batchid > option[value!="All"]').prop('selected',false);  

	$('#batchid').change(function(){
  
    var $selected = $(this).val().toString().split(',');
    $('#batchid > option').prop('selected',false);
    $.each($selected,function(i,item){
      $('#batchid > option[value="'+item+'"]').prop('selected',true);    
    });
   
    //When I select All Batches option then Batch01 option will be deselected
    if($('#batchid > option[value="All"]:selected').length > 0)
    {
        $('#batchid > option[value!="All"]').prop('selected',false);
    };
    
    //When I select Batch01 option then All Batches option will be deselected
    if($('#batchid > option[value!="All"]:selected').length > 0)
    {
        $('#batchid > option[value="All"]').prop('selected',false); 
    };
      
  });
});

<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">All Batches</option>
       <option value="1">Batch01</option>
       <option value="2">Batch02</option>
   </select>   
</div>