I would like to know how to condition the selection of elements in the checkbox group, if in another group some element was selected
I have two checkboxes:
a first checkbox called comida_fuerte :
- Fish
- Chicken
- Meat
And another checkbox called comida_sopa :
- res
- hen
- chicken
Then I would like to do that:
- Only two options from each checkbox group can be taken maximum, I do not know if you should change the name of each checkbox or leave it like that.
- Only items from a checkbox group can be marked, either
comida_fuerteorcomida_sopa, if I select an element ofcomida_fuerteit automatically lockscomida_sopaand vice versa if you select some element ofcomida_sopait lockscomida_fuerte
This is the sample code
<html>
NOTA:
*Solo es posible seleccionar dos elementos(como maximo) de algún grupo
de opciones, ya sea de comida fuerte o de sopas.
*Solo se puede seleccionar elementos de un grupo en particular, es
decir, si selecciona comida fuerte solo podrá tomar elementos de dicho
grupo y por el contrario si selecciona sopas, solo podra tomar sopas.
Elija su comida fuerte
<input type="checkbox" name="comida_fuerte" value="pollo">
<input type="checkbox" name="comida_fuerte" value="carne">
<input type="checkbox" name="comida_fuerte" value="pescado">
Elija su sopa
<input type="checkbox" name="comida_sopa" value="res">
<input type="checkbox" name="comida_sopa" value="gallina">
<input type="checkbox" name="comida_sopa" value="pollo">
They told me that it could be done with a select that when activated
select comida_fuerte or comida_sopa you will display the checkboxes
but I do not know how to do it
FINAL CODE
<?php
include "conexion.php";
?>
<html>
<head>
<script type="text/javascript">
var allFoods = document.querySelectorAll(
'input[name="comida_fuerte"],'+
'input[name="comida_sopa"]'
);
[].forEach.call(allFoods, function (food) {
food.addEventListener('change', onFoodSelected);
});
/**
* Se ejecuta cuando se cambia el valor
* de 'checked' de cada checkbox. Solo
* se admiten dos checkboxes seleccionados
*/
function onFoodSelected (e) {
var name = e.target.getAttribute('name');
var selected = document.querySelectorAll('input:checked');
if (selected.length === 0) {
[].forEach.call(allFoods, function (food) {
food.disabled = false;
});
} else if (selected.length <= 2) {
disableAltFood(name);
} else if (selected.length > 2) {
e.target.checked = false;
}
}
/**
* Desactiva el grupo de checkbox
* de comidas alternativas.
*
* @param {string} name Tipo de comida
*/
function disableAltFood (name) {
var discriminator = 'comida_';
discriminator += name.indexOf('fuerte') < 0 ? 'fuerte' : 'sopa';
var foods = document.querySelectorAll('input[name="' + discriminator + '"]');
[].forEach.call(foods, function (food) {
food.disabled = true;
});
}
</script>
</head>
<form action="procesar.php" method="post">
<label for="name"> nombre </label> <br/>
<input type="text" name="nombre" placeholder="ingrese su nombre"*>
<br/>
<label for="codigo"> codigo </label> <br/>
<input type="text" name="codigo" placeholder="ingrese su nombre"*>
<br/>
Elija su comida fuerte
<?php
$registros= mysqli_query($conexion, "SELECT * FROM comida_fuerte");
while($comida = mysqli_fetch_array($registros)){
echo "<input type='checkbox' name='comida_fuerte' value='".$comida["id_comida_fuerte"]."'>".$comida["desc_comida_fuerte"];
}
?>
<br/>
Elija su sopa
<?php
$registros2= mysqli_query($conexion, "SELECT * FROM comida_sopa");
while($comida2 = mysqli_fetch_array($registros2)){
echo "<input type='checkbox' name='comida_sopa' value='".$comida2["id_comida_sopa"]."'>".$comida2["desc_comida_sopa"];
}
?>
<br/>
<input type="submit" value="registrar"*>
</form>
</html>