Mes cases à cocher sont dynamiques et je n'ai besoin de vérifier l'état que si ma case à cocher avec "AUTRES" est cliquée ou non. Mes cases à cocher sont donc:

<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>

J'ai donc essayé de vérifier si les cases à cocher "Autres" sont cochées ou non mais alert () n'est pas déclenché.

if($("span:contains('OTHERS')").prop('checked') == true){
                alert("here");

            }
1
ashwin karki 27 janv. 2019 à 09:35

5 réponses

Meilleure réponse

Vous ne vérifiez pas l'hélice si vous saisissez l'orme à la place, vous vérifiez l'hélice de la portée, utilisez ce code

//gets the input
const elm = $("span:contains('OTHERS')").siblings()[0];
if($(elm).prop('checked')) alert("here");
3
Maheer Ali 27 janv. 2019 à 06:45

Il s'agit d'un problème de traversée DOM - vous devez passer de la plage UP au parent, puis DOWN pour trouver l'entrée qui est vérifiée.

Notez également que mettre vérifié = "" dans l'entrée est l'équivalent de vérifié = "vérifié" - c'est pourquoi cela apparaît comme vérifié dans l'extrait de code.

EDIT - solution mise à jour pour permettre le paramétrage de la variable en fonction du clic du label "AUTRES"

let myvariable;

$('label').click(function(){
  let spanText = $(this).find('span').text();
  let inputChecked = $(this).find('input').is(':checked')

  if(spanText == 'OTHERS' && inputChecked){
     myvariable = 3;
     alert(myvariable);
   }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1"> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2"> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3"> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>
0
gavgrif 27 janv. 2019 à 07:36

Cela va regarder à travers toutes les cases à cocher et vérifier celle qui a 'AUTRES'.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#check').addEventListener('click', () => {
    document.querySelectorAll('input[type="checkbox"]').forEach(chk => {
      if(chk.parentNode.querySelector('span').innerText == 'OTHERS') {
        alert(chk.checked);
      }
    });
  });


});
<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>
<!-- Just for the answer -->
<button id="check">Check</button>
0
Bibberty 27 janv. 2019 à 07:00

Il semble que nous devons d'abord vérifier si la case à cocher est cochée ou non, puis vérifier si la valeur du texte de ses frères et sœurs est égale à «OTHERS».

J'ai déclenché l'alerte de cette manière:

  $("input[type='checkbox']").change(function(){
   if($(this).prop('checked') == true && $(this).siblings("span").text() == "OTHERS"){
        alert("here");
    }
  });

Nous pouvons également modifier le HTML pour le simplifier davantage en attribuant directement value="OTHERS" à la case à cocher.

$("input[value='OTHERS']").change(function(){
     if($(this).prop('checked') == true){
            alert("here");
        }
  });
1
Dakshim Chhabra 27 janv. 2019 à 06:52

Essaye ça

const elm = $("span:contains('OTHERS')").closest("label").find("input[type=checkbox]");
if($(elm).prop('checked')) alert("here");
0
Hamzeh.Ebrahimi 27 janv. 2019 à 11:14