onclickボタンで選択した値を除いてチェックを外す方法

Question

ここでは、ボタンをオンにして、フィールドのチェックを外したいと思います。データリストを使用しています。私が選択したと仮定します。marathahalliは、あなたが明示的にそれらのすべてをマーキングされているので、私は試してみましたが、ここですべての値がオフにされ、チェックを外し作りたい、実行する方法を誰もが意味を知っていれば、私のスニペットを更新してください

$('.options').on('change', function() { 
 
    var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id'); 
 
    $('#locality_id').val(locality); 
 
}).change(); 
 

 
$("#search1").click(function(){ 
 
     
 
    var localityId = $("#locality_id").val(); 
 

 
    if(localityId != ''){ 
 
     $('.myCheckbox').attr('checked', false); // Unchecks it 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value=""> 
 

 
<datalist id="options"> 
 

 
<option data-id="1" value="Marathahalli"></option> 
 

 
<option data-id="2" value="Silk Board"></option> 
 

 
<option data-id="3" value="Jaya Nagar"></option> 
 

 
<option data-id="5" value="Kadubeesanahalli"></option> 
 

 
<option data-id="6" value="Bellandur"></option> 
 

 
<option data-id="7" value="Kundalahalli"></option> 
 

 
<option data-id="8" value="JP nagar"></option> 
 
\t \t \t \t </datalist> 
 
<input type="hidden" name="localityId" id="locality_id" value=""> 
 

 
<button id="search1" type="button">Click Me!</button> 
 

 

 
<form id="filterForm"> 
 
    
 
     <ul style="padding-left: 0px;"> 
 
           
 
     <li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li> 
 
    </ul> 
 

 
     
 
    
 
</form>

Answer 1

これが起こっていますフィルタリングされていないものとしてチェックします。コードを変更しました。私はマラサハリを選択しています私たちのデータリストは初めてで想定起こっ問題が何であるかを教えてくれますあなたのコードが完全に機能していない

$('.options').on('change', function() { 
 
    var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id'); 
 
    $('#locality_id').val(locality); 
 
}).change(); 
 

 
$("#search1").click(function(){ 
 
     
 
    var localityId = $("#locality_id").val(); 
 

 
    if(localityId != ''){ 
 
     $('.myCheckbox').each(function() { 
 
      if (localityId === $(this).val()) { 
 
      $(this).attr('checked', true); 
 
      } else { 
 
      $(this).attr('checked', false); 
 
      } 
 
     }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value=""> 
 

 
<datalist id="options"> 
 

 
<option data-id="1" value="Marathahalli"></option> 
 

 
<option data-id="2" value="Silk Board"></option> 
 

 
<option data-id="3" value="Jaya Nagar"></option> 
 

 
<option data-id="5" value="Kadubeesanahalli"></option> 
 

 
<option data-id="6" value="Bellandur"></option> 
 

 
<option data-id="7" value="Kundalahalli"></option> 
 

 
<option data-id="8" value="JP nagar"></option> 
 
\t \t \t \t </datalist> 
 
<input type="hidden" name="localityId" id="locality_id" value=""> 
 

 
<button id="search1" type="button">Click Me!</button> 
 

 

 
<form id="filterForm"> 
 
    
 
     <ul style="padding-left: 0px;"> 
 
           
 
     <li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li> 
 
        
 
     <li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li> 
 
    </ul> 
 

 
     
 
    
 
</form>