Insert an INPUT value based on a checkbox

Question

I have a form that has a button to mark all checksbox in a datatable. So far, so good. What I can’t do is take the value of checkbox marked and return the value 1 in another input within the datatable.

I tried so:

var checkbox = document.getElementsByName('marcar[]');

    var cps = document.getElementById("Numbloqueios");    
    function addCheck() {
      var teste = [];
      for (var i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked == 0) teste.push(checkbox[i].value);
      }
      cps.innerHTML = teste.join();
    }

HTML:

<div class="col-md-8">
                            <div class="row">

                                <div class="col-md-3 col-md-offset-3">
                                    <label for="todos">Selecionar Todos:</label>
                                    <button class='btn btn-large' type='button' title='Todos' id='todos'
                                        onclick='marcardesmarcar();'>
                                        <i class='icon-large  icon-ok'>Aperte Aqui</i>

                                    </button>
                                </div>

                                <div class="col-md-6">
                                    <label for="salvar">Para Aprovar:</label>
                                    <button class='btn btn-large' type='button' title='salvar' id='salvar' onclick='addCheck()'>
                                        <i class='icon-large  icon-ok'>Aperte Aqui</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12" data-type="tabledetail" data-show-properties="" data-field-name="Itens2">
                    <div class="form-input">
                        <label class="text-danger">Lançamentos</label>
                        <table tablename="tableItens" class="table table-bordered table-striped" noaddbutton="true">
                            <thead class="thead-light">
                                <tr class="active">
                                    <td></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>

                                    <td style="text-align: center; vertical-align:middle">
                                        <div class="col-sm-1" data-type="textbox" data-show-properties=""
                                            data-field-name="checar" id="indexador">
                                            <div class="form-input">
                                                <div class="form-group"></div>
                                            </div>
                                            <input type="checkbox" class="marcar" value ="" id="marcar" name="marcar">
                                        </div>
                                    <td>

---

good guys I did something wrong using the example of @Danilo Leone, I tried again and made some adaptations, conform below.

<script type="text/javascript">

    function get_all_id() {
        var checkbox = document.getElementsByClassName('marcar[]');
        var cpbloq = document.getElementById('cpnumbloqueios').value;

        var cps = document.querySelector('input[name="Numbloqueios"]');
        var teste = [];
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked == 1 && (cpbloq = 1) ) teste.push(checkbox[i].value);
        }

        cps.innerHTML = teste.join();
        console.log(teste);

    }
</script>

But the console.log returns empty.

Answer 1

After doing a lot of research and asking for help elsewhere, follow below as I solved my challenge.

function checaMarcador(){
        var linha;
        $('td').click(function(){
            var row_index = $(this).parent().index();
            var col_index = $(this).index();
            linha = row_index;              
            var bloqueado = 1;
            var desbloqueado = 0;               
            var marcador = document.getElementById("marcar___" + linha).checked;                
            if (marcador == true) {
                $("#Numbloqueios___" + linha).val(desbloqueado);
            } else {
                $("#Numbloqueios___" + linha).val(bloqueado);
            }

        })
    };

Answer 2

function addCheck() {
var checkbox = document.getElementsByName('marcar[]');

var cps = document.getElementById("Numbloqueios");  
  var teste = [];
  for (var i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked == 0) teste.push(checkbox[i].value);
  }
  cps.innerHTML = teste.join();
}

Answer 3

"- What I’m not able to do is take the value of the checked checkbox and return the value 1 in another input within the datatable"

With this simple script you can return the value of each input:

document.getElementById('btn').addEventListener(
    'click',
    function(){
        let checkboxs = document.querySelectorAll('input[type="checkbox"]:checked');
        let valores = [];

        // NodeList:
        //console.log(checkboxs);

        // Cada loop é referente a um checkbox - semelhante ao foreach do php
        for (let chbx of checkboxs) {
            // console.log(chbx.value);
            valores.push(chbx.value);
        }
        
        document.getElementById('valores_junto').innerHTML = valores.join(' ');
    },
    false
);

label {
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Retornar valor dos checkboxes marcados</title>
    </head>
    <body>
        <form>
            <label>Checkbox #1
                <input type="checkbox" value="1">
            </label>
            <label>Checkbox #2
                <input type="checkbox" value="2">
            </label>
            <label>Checkbox #3
                <input type="checkbox" value="3">
            </label>
            <button type="button" id="btn">Retornar marcados</button>
            <div id="valores_junto"></div>
        </form>
    </body>
</html>

I put the values in a div. Now you just apply in your project.