Kontrollkästchen umschalten, wenn in Tabelle

Question

Ich habe eine Tabelle mit einigen rows and columns. Und es gibt ein Bild, das eine checkbox in each row and column darstellt. Grundsätzlich würde beim Klicken auf das Bild dieses Kontrollkästchen aktiviert (Bildauswahl).

Was ich tun wollte, ist, wenn ich auf ein Bild (Kontrollkästchen) klicke, der Rest wird ausgeblendet und klick es wieder würde den Rest zeigen (Toggle).

$(document).ready(function() { 
 
    $('.sign-reason').change(function() { 
 
    $(this).parent('td').siblings().toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
      <img src="../../css/signs/cantilever.png" class="sign_selector" rel="{cantilever}"> 
 
     <label></label> 
 
     </label> 
 
     </td> 
 
     <td> 
 
     <label> 
 
      <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
      <img src="../../css/signs/950x300.png" class="sign_selector" rel="{950x300}"> 
 
      <label></label> 
 
     </label> 
 
     </td> 
 
     <td> 
 
     <label> 
 
      <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
      <img src="../../css/signs/1300x370.png" class="sign_selector" rel="{1300x370}"> 
 
      <label></label> 
 
     </label> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
      <img src="../../css/signs/1000x300freestanding.png" class="sign_selector" rel="{1000x300fs}"> 
 
      <label></label> 
 
     </label> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td> 
 
     <label> 
 
      <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
      <img src="../../css/signs/1100x300.png" class="sign_selector" rel="{1100x300}"> 
 
      <label></label> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ist es möglich, wenn ich auf image klicken, werden alle anderen images versteckt werden und wieder zu klicken, die Bilder zeigen.

Vielen Dank

Answer 1

Sie können jQuerys Show() und hide() Methoden. Aber wir hatten einige seltsame Ausgaben, wenn wir sie benutzten (es kommt nicht immer vor), anstatt sie zu verstecken, änderten wir das HTML-Attribut "display: none" und schalteten es mit show() wieder ein. Natürlich nach der Kontrolle ob das Bild überprüft wurde oder nicht.

Sie können Funktionen entsprechend unter Ihrer Tastenklick-Funktion entsprechend dem, was Sie ausblenden oder anzeigen möchten, erstellen, und Sie können das Umschalten implementieren. Viel Glück !

Answer 2

Besser können Sie einen CSS-Stil erstellen, um das Element auszublenden und die Klasse umzuschalten.

$(document).ready(function() { 

    $('.sign-reason').change(function() { 
     // here parents function will search for the parent tr, where as parent only referes to direct parent of element 
     $(this).parents('td').siblings().toggleClass('hide'); 

    }); 

}); 

/* class to hide the element */ 
.hide{ display:none; } 

Answer 3

Hier gehen Sie mit einer Lösung https://jsfiddle.net/sbkw7y3z/

$(document).ready(function() { 
 
    $('.sign-reason').change(function() { 
 
    $('.sign-reason').closest('label').toggle(); 
 
     $(this).closest('label').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{cantilever}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{950x300}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1300x370}"><label></label></label></td> 
 
    </tr> 
 

 
    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1000x300fs}"><label></label></label></td><td>&nbsp;</td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1100x300}"><label></label></label></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Hope this Ihnen helfen.

Answer 4

Versuchen Sie, diese einfache Lösung:

$(document).ready(function() { 
 
    $('.sign-reason').change(function() { 
 
    $('.sign-reason').not(this).closest("td").toggle() 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <label>1 
 
     <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{cantilever}"> 
 
     <label></label> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     <label>2 
 
     <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66g" class="sign_selector" rel="{950x300}"> 
 
     <label></label> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     <label>3 
 
     <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1300x370}"> 
 
     <label></label> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
     
 
    <tr> 
 
    <td> 
 
     <label>4 
 
     <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1000x300fs}"> 
 
     <label></label> 
 
     </label> 
 
    </td> 
 
    <td>&nbsp;</td> 
 
    <td> 
 
     <label>5 
 
     <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"> 
 
     <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1100x300}"> 
 
     <label></label> 
 
     </label> 
 
    </td> 
 
    </tr> 
 
</table>