Home / Questions / 280324
Accepted
Gian Franco Alexis Poma Vidal
Asked: 2020-07-20 22:02:57 +0800 CST 2020-07-20 22:02:57 +0800 CST

Why is my element.textContent NOT evaluating well?

  • 772

I have 3 equitetes, a label with its predefined value, an input text with an empty value and a disabled checkbox. I want that when the label has the value "ASSISTED" the input text label also has that value and the checkbox is enabled. And when the label has the value "MISSING" the input text label has the same value and the checkbox is disabled.

To achieve this I use this following script:

$(".lbl-asistencia").each(function (index, element) {
        if (element.textContent == "ASISTIO") {
            $(".chk-asistencia").prop("checked", true)
            $(".txt-asistencia").val("ASISTIO");
        }
        else {
            $(".chk-asistencia").prop("checked", false)
            $(".txt-asistencia").val("FALTO");
        }
    });

But the result that comes back to me is this: enter image description here

Everything gives me ASSIST, when in reality there is only one ASSIST value and the others are MISSING.

How could I fix this?

My code

$(".lbl-asistencia").each(function (index, element) {
            if (element.textContent == "ASISTIO") {
                $(".chk-asistencia").prop("checked", true)
                $(".txt-asistencia").val("ASISTIO");
            }
            else {
                $(".chk-asistencia").prop("checked", false)
                $(".txt-asistencia").val("FALTO");
            }
        });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<table class="table">
    <tbody><tr>
        <th>
            id_alumno
        </th>
        <th>
            dni_alumno
        </th>
        <th>
            nombre_alumno
        </th>
        <th>
            ape_pat_alumno
        </th>
        <th>
            ape_mat_alumno
        </th>
        <th>
            asistencia_alumno
        </th>
        <th></th>
    </tr>

    <tr>
        <td>
            1
        </td>
        <td>
            76475156
        </td>
        <td>
            GIAN FRANCO ALEXIS
        </td>
        <td>
            POMA
        </td>
        <td>
            VIDAL
        </td>
        <td>
            <label class="lbl-asistencia">FALTO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
            76475155
        </td>
        <td>
            GONZALO ALONSO
        </td>
        <td>
            GODOS
        </td>
        <td>
            VERA
        </td>
        <td>
            <label class="lbl-asistencia">FALTO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            3
        </td>
        <td>
            76475154
        </td>
        <td>
            DRUCILA
        </td>
        <td>
            VIDAL
        </td>
        <td>
            CALDERÓN
        </td>
        <td>
            <label class="lbl-asistencia">ASISTIO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>

</tbody></table>

javascript

1 Answers

  1. Best Answer

    You are calling all the elements with the classes '.chk-asistencia'and '.txt-asistencia'thus assigning the last value of the table row for all the fields, you must make the change to the SIBLINGS of the label, for that use the function parent()to get to the parent and then find()to search in their children (that is, the brothers of the label).

    The code would be like this:

    function hanlderAsistencia(){
    $(".lbl-asistencia").each(function (index, element) {
        let estados = { 
               asistio: { text: "ASISTIO", check: true }, 
               falto: { text: "FALTO", check: false }
              };
       let estado = null;
       if (element.textContent == estados.asistio.text ) {
           estado = estados.asistio;
       }
       else {
           estado = estados.falto;  
       }
     elcheck = $(element).parent().find('.chk-asistencia');
     elinput = $(element).parent().find('.txt-asistencia');
     $(elcheck.get(0)).prop('checked',estado.check);
     $(elinput.get(0)).val(estado.text);
    });
}
hanlderAsistencia();
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<table class="table">
    <tbody>
      <tr>
        <th>
            id_alumno
        </th>
        <th>
            dni_alumno
        </th>
        <th>
            nombre_alumno
        </th>
        <th>
            ape_pat_alumno
        </th>
        <th>
            ape_mat_alumno
        </th>
        <th>
            asistencia_alumno
        </th>
        <th></th>
    </tr>

    <tr>
        <td>
            1
        </td>
        <td>
            76475156
        </td>
        <td>
            GIAN FRANCO ALEXIS
        </td>
        <td>
            POMA
        </td>
        <td>
            VIDAL
        </td>
        <td>
            <label class="lbl-asistencia">FALTO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
            76475155
        </td>
        <td>
            GONZALO ALONSO
        </td>
        <td>
            GODOS
        </td>
        <td>
            VERA
        </td>
        <td>
            <label class="lbl-asistencia">FALTO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            3
        </td>
        <td>
            76475154
        </td>
        <td>
            DRUCILA
        </td>
        <td>
            VIDAL
        </td>
        <td>
            CALDERÓN
        </td>
        <td>
            <label class="lbl-asistencia">ASISTIO</label>
            <input type="checkbox" class="chk-asistencia">
            <input type="text" class="txt-asistencia">
        </td>
        <td>
            <a href="/Charlas/Edit">Edit</a> |
            <a href="/Charlas/Details">Details</a> |
            <a href="/Charlas/Delete">Delete</a>
        </td>
    </tr>

</tbody></table>

    • 2