1
<div class="well">
  <h2>Select you files</h2>
  <table id="list-files" class="table table-bordered table-striped table-condensed table-hover">
    <tbody>
      <tr>
        <th width="10px"><input type="checkbox" id="select-all-files" checked="checked"></th>
        <th>File</th>
        <th>Size</th>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
        <td><input type="checkbox" name="files[]" value="0" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[0]" value="tuSITIO.com.txt"></span></div>
        </td>
        <td>34.0 iB</td>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
        <td><input type="checkbox" name="files[]" value="1" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[1]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.mkv"></span></div>
        </td>
        <td>8.8 GiB</td>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
        <td><input type="checkbox" name="files[]" value="2" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[2]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.nfo"></span></div>
        </td>
        <td>5.4 KiB</td>
      </tr>
    </tbody>
  </table>
</div>

Como hago para deseleccionar solo el checkbox asociado al input con valor tuSITIO.com.txt utilizando jQuery?

Mi script:

$("input:checkbox[value=1]").removeAttr("checked");

Como notarán mi script apunta a inputs de tipo checkbox con value=1 (orden donde se encuentra, en este caso, el archivo .txt). Sin embargo, el orden del archivo tuSITIO.com.txt suele cambiar a value=0, value=2, etc, por lo que ese selector no es correcto en todos los casos.

¿Como lo resolverían ustedes?

1
  • Si la segunda posición no es siempre garantizada ¿Por que no simplemente asignarle un id para seleccionarlo y manipularlo? Al menos el valor del input "tuSITIO.com.txt" es fijo? el 21 oct. 2017 a las 6:16

1 respuesta 1

2

Asumiendo que nada no hay garantía que el checkbox se encuentre en la segunda posición tienes al menos dos opciones.

  1. Primera y mas sencilla, asignarle un id al checkbox, obtenerlo por id y setear su propiedad checked con su valor opuesto.
  2. Si por alguna extraña razón no puedes setearle un id pero si se va a respetar la estructura del html y el valor del input puedes:
    • Obtener el input a partir de su valor "tuSITIO.com.txt"
    • Otener el td padre, recorriendo los ancestros hasta llegar a un tr, sin incluirlo mediante .parentsUntil()
    • Estando en el td padre obtener su td hermano
    • Estando en el td hermano obtener su hijo checkbox
    • Manipular el atributo checked de dicho hijo

Esta segunda opción no es recomendable ya que se es compleja innecesariamente y puede ser afectada por cambios en tu arbol del documento; mientras que la opción 1 no.

// 1
$("#uncheck-id").on("click", function(){
    let tuSitioCheckbox = $("#tusitiocheckbox");
    tuSitioCheckbox.prop("checked", !tuSitioCheckbox.prop("checked"));
});

// 2
$("#uncheck").on("click", function(){
   let parentTd = $("input[value='tuSITIO.com.txt']").parentsUntil("tr")[2]; // por la estructura sabemos que el hijo 0 es span, hijo 1 es div e hijo 2 es td.
   let siblingTd = $(parentTd).siblings()[0];
   let matchingCheckbox = $(siblingTd).children()[0];
   let currentValue = $(matchingCheckbox).prop("checked");
   $(matchingCheckbox).prop("checked", !currentValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
  <h2>Select you files</h2>
  <table id="list-files" class="table table-bordered table-striped table-condensed table-hover">
    <tbody>
      <tr>
        <th width="10px"><input type="checkbox" id="select-all-files" checked="checked"></th>
        <th>File</th>
        <th>Size</th>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
      <td><input id="tusitiocheckbox" type="checkbox" name="files[]" value="0" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[0]" value="tuSITIO.com.txt"></span></div>
        </td>
        <td>34.0 iB</td>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
        <td><input type="checkbox" name="files[]" value="1" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[1]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.mkv"></span></div>
        </td>
        <td>8.8 GiB</td>
      </tr>
      <tr class="selectedFiles" style="display: table-row;">
        <td><input type="checkbox" name="files[]" value="2" checked=""></td>
        <td>
          <div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[2]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.nfo"></span></div>
        </td>
        <td>5.4 KiB</td>
      </tr>
    </tbody>
  </table>
  
<button id="uncheck-id"> 1) Click me to uncheck by id </button>
  <button id="uncheck"> 2) Click me to uncheck traversing ancestors </button>

</div>

5
  • 1
    Muchas gracias por la elaborada respuesta y perdon por la tardía respuesta, no pude ingresar sino hasta ahora. Como podria aplicar ese comando, el primero por ej, en Tampermonkey? es para el sitio: multiup.org/en/upload/from-torrent el 16 nov. 2018 a las 5:34
  • Es simplemente JQuery, puedes hacerlo con javascript vanilla tambien. Lo que quieres hacer es agregar ese script en Tampermonkey para que se active en multiup? Tu controlas el DOM de multiup o quieres injectar scripts con Tampermonkey? Porque si controlas el DOM es simplemente agregarle un id al checkbox que quieras y agregar el script, de no ser asi debes ver como esta hecha la estructura de multiup para ver si puedes tener un id o buscar otra solucion. No me queda claro que intentas hacer. el 18 nov. 2018 a las 23:25
  • soy bastante iniciado en esto, pero ya tengo solucionado este problema, si no logré ser lo suficientemente claro en el post entonces no puedo explicarlo lo unico q puedo decir es q tu código funciona cuando lo pruebo acá pero cuando lo cargo en Tampermonkey en el sitio donde realmente quiero q funcione no lo hace. pero de todos formas hice otra pregunto y esto ya está listo, grax el 19 nov. 2018 a las 0:12
  • Bien, si, deberias enfocarte en ver como utilizar Tampermonkey, quiza puedas comenzar con un script mas sencillo (estilo console.log("Hello world") y luego ya vas viendo :) el 19 nov. 2018 a las 0:33
  • Tampermonkey es facil, lo dificil son los script jaja, Tampermonkey me interesa por lo q puede lograr pero tratar de entenderlo requiere un interés más amplio del que estoy teniendo. por ahora solo busco preguntas similares a las mías en el foro ingles y copio y pruebo el 19 nov. 2018 a las 0:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.