Mark checkbox with a jquery button

Navigation
1

Hello greetings to all my friends. I have a little question.

I want to select progressively the checkboxes that appear in the image when I press a button. For example, pressing the button selects the first checkbox, if you press it again, the first checkbox is unchecked and the second checkbox is selected. If I press the button again the second one is demarcated and the third one is marked and so on until the end. And when the last checkbox arrives, if I click on the button, the last checkbox will be unchecked and the first one will be marked and the process can be repeated.

I appreciate your help. Thank you very much 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
        <tr>
            <td>Checkbox 1: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 2: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 3: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 4: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 5: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 6: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 7: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 8: <input type="checkbox" name="checkbox[]" /></td>
        </tr>
    </table>
    <input type="button" value="Marcar" class="button">

<script type="text/javascript">
            $(".button").click(function() { 
                    $("input[type=checkbox]").prop("checked",true);
            })  
</script>
    
asked by Carlos Maldonado 31.10.2018 в 19:43
source

3 answers

3

You can do it with a counter for the position of the checkbox to be marked, and call the desired checkbox using the function eq() de jquery: 

var indice = 0;

$("button").click(function() { 
  // Desmarcar todas las checkboxes
  $("input[type=checkbox]").prop("checked", false);
  // Marcar únicamente el checkbox que corresponde al índice
  $("input[type=checkbox]").eq(indice++).prop("checked",true);

  // Si el índice llega a la cantidad de checkboxes, reiniciar
  if(indice>=$("input[type=checkbox]").length) indice = 0;
})  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Check!</button>
<table>
        <tr>
            <td>Checkbox 1: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 2: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 3: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 4: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 5: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 6: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 7: <input type="checkbox" name="checkbox[]" /></td>
            <td>Checkbox 8: <input type="checkbox" name="checkbox[]" /></td>
        </tr>
    </table>
    
answered by 31.10.2018 в 21:29
2

To mark the checkbox you can use the prop () method of JQuery, with which you can get the value of a property or set it, in the case of activating checkboxes, the property is checked .

On the other hand, if you want to unmark the rest, you can use the each () method to set all checkbox and that they are deactivated, and later set the property 'checked' on the element clicked so that it is activated.

To mark the inputs you can add a counter and go deactivating and activating the inputs (you deactivate the previous one and activate the next one).

I'll give you a simple example so you can develop it and implement it in your project, in which when you check all the checkboxes, go back to the beginning. 

//Total de inputs a marcar
var totalInputs = $(".btn").length - 1;
//Contador a 0
var contador = 0;

$(".button").click(function() {
  //Si el contador es mayor o igual que el numero de inputs movemos el contador a 0
  if (contador >= totalInputs) {
    $(".btn").eq(contador).prop("checked", true);
    $(".btn").eq(contador - 1).prop("checked", false);
    contador = 0;
  //Si el contador es 0, borramos el ultimo input y activamos el primero
  } else if (contador === 0){
    $(".btn").eq(contador).prop("checked", true);
    $(".btn").eq(totalInputs).prop("checked", false);
    contador++;
  //Si no, vamos desactivando el anterior y activando el siguiente
  } else {
    $(".btn").eq(contador).prop("checked", true);
    $(".btn").eq(contador - 1).prop("checked", false);
    contador++;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td>Checkbox 1: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 2: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 3: <input class="btn" type="checkbox" name="checwkbox[]" /></td>
  <td>Checkbox 4: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 5: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 6: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 7: <input class="btn" type="checkbox" name="checkbox[]" /></td>
  <td>Checkbox 8: <input class="btn" type="checkbox" name="checkbox[]" /></td>
</tr>
</table>
<input type="button" value="Marcar" class="button">
    
answered by 31.10.2018 в 20:13
1

I added the class mycheckbox to facilitate it, I leave the code documented.

Greetings 

//Cuando el dom este listo
$(()=>{

//Reservamos un indice que inicia en 0
var current_check = 0;

//Evento click
$( document ).on( 'click', '.button', function(){
  
  //Barrer todos los checkbox y quitarles el checked
  $('.mycheckbox').prop('checked', false);
  
  //Crear un selector de checkboxes
  let checkboxes = $('.mycheckbox');
  
  //Poner checkeado el checkbox donde vaya el indice
  $( checkboxes[ current_check ] ).prop('checked',true);
  
  //Dependiendo si el indice es mayor a el numero de checkboxes enlistados se reinicia, si no aumenta
  current_check = current_check >= checkboxes.length -1 ? 0 : current_check + 1;
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
        <tr>
            <td>Checkbox 1: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 2: <input type="checkbox" name="checkbox[]" class="mycheckbox"/></td>
            <td>Checkbox 3: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 4: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 5: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 6: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 7: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
            <td>Checkbox 8: <input type="checkbox" name="checkbox[]" class="mycheckbox" /></td>
        </tr>
    </table>
    <input type="button" value="Marcar" class="button">
    
answered by 31.10.2018 в 21:36
Generate executable in c # [closed] Alphabetic ordering c #