mais honnêtement, je suis perplexe. J'ai regardé sur l'interweb et je n'arrive tout simplement pas à trouver une solution qui correspond à mes besoins
<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>
<script type="text/javascript">
$("#TOP123").on('click',function(){
$(".TOP123").prop('checked', $(this).prop("checked"));
});
$("#BOT123").click(function() {
$(".BOT123").prop('checked', $(this).prop("checked"));
});
</script>
<div id="ImageContainer">
<input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" class="CEKPOS1 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" class="CEKPOS2 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" class="CEKPOS3 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" class="CEKPOS4 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" class="CEKPOS5 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" class="CEKPOS6 BOT123 originalinput" />
</div>
Ce que j'essaie de faire, c'est que la Top Div (Button) coche / décoche toutes les cases à cocher par classe TOP123 . et de même avec Bottom div cocher / décocher toutes les cases à cocher par classe BOT123 J'ai essayé beaucoup de variantes et pourquoi les fonctions TOP et BOT sont différentes Merci pour votre aide
3 Réponses :
Vous devez parcourir les classes et basculer l'état coché sur chaque élément de cette classe,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="TOP123">Top</div> <div id="BOT123">Bottom</div> <div id="ImageContainer"> <input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" onchange="Alterticketdata(\'123\')" class="CEKPOS1 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" onchange="Alterticketdata(\'123\')" class="CEKPOS2 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" onchange="Alterticketdata(\'123\')" class="CEKPOS3 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" onchange="Alterticketdata(\'123\')" class="CEKPOS4 BOT123 originalinput" /> <input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" onchange="Alterticketdata(\'123\')" class="CEKPOS5 BOT123 originalinput" /> <input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" onchange="Alterticketdata(\'123\')" class="CEKPOS6 BOT123 originalinput" /> </div>
$("#TOP123").on('click',function(){
$(".TOP123").each(function(){
var checked = $(this).is(':checked');
$(this).prop("checked", !checked)
});
})
$("#BOT123").on('click',function(){
$(".BOT123").each(function(){
var checked = $(this).is(':checked');
$(this).prop("checked", !checked)
});
})
Op dit cochez / décochez toutes les cases par classe mais avec votre code, vous ne pouvez que le vérifier.
Veuillez également prendre votre temps lorsque vous répondez, cette ligne de base n'a pas de sens `tje classaes and pply the checked state to ech ite`
Votre problème est le suivant:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>
<script type="text/javascript">
$("#TOP123").on('click', function() {
$(".TOP123").prop('checked', !$(".TOP123").prop("checked"));
});
$("#BOT123").click(function() {
$(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
});
</script>
<div id="ImageContainer">
<input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" onchange="Alterticketdata(\'123\')" class="CEKPOS1 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" onchange="Alterticketdata(\'123\')" class="CEKPOS2 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" onchange="Alterticketdata(\'123\')" class="CEKPOS3 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" onchange="Alterticketdata(\'123\')" class="CEKPOS4 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" onchange="Alterticketdata(\'123\')" class="CEKPOS5 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" onchange="Alterticketdata(\'123\')" class="CEKPOS6 BOT123 originalinput" />
</div> $ (this) fait référence au div sur lequel vous avez cliqué, pas aux cases à cocher.
À la place , vous pouvez changer ceci (et celui du bas en ".BOT123") en:
!$(".TOP123").prop("checked"));
Ce qui changera vos cases à cocher à la valeur opposée de ce qu'elles sont actuellement. p>
Voir l'exemple ci-dessous:
$(this).prop("checked")
Remarque: Le facteur déterminant qui vérifie si les cases à cocher doivent être cochées / décochées est la première case à cocher pour chaque groupe (c'est-à-dire la 1ère et la 4ème case à cocher).
Utilisez ce code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="TOP123">Top</div> <div id="BOT123">Bottom</div> <div id="ImageContainer"> <input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" class="CEKPOS1 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" class="CEKPOS2 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" class="CEKPOS3 TOP123 originalinput" /> <input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" class="CEKPOS4 BOT123 originalinput" /> <input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" class="CEKPOS5 BOT123 originalinput" /> <input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" class="CEKPOS6 BOT123 originalinput" /> </div>
$ (this) .prop ("checked") fait référence au fait que vous essayez de définir le "bouton / div" à coché, mais à la place utilisez ! $ (". TOP123"). is (": checked") il vous demandera si la case à cocher .TOP123 est cochée ou non, et inverser.
Démo de travail
$("#TOP123").on('click', function() {
$(".TOP123").prop('checked', !$(".TOP123").is(":checked"));
});
$("#BOT123").click(function() {
$(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
});
$("#TOP123").on('click', function() {
$(".TOP123").prop('checked', !$(".TOP123").is(":checked"));
});
$("#BOT123").click(function() {
$(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
});