[JavaScript/HTML] checkbox setten door klik op tr

[bartbh]

Ik wil een checkbox die zich in een tr bevindt, kunnen (un)setten door te klikken op de tr. Met behulp van jQuery is dit relatief eenvoudig te bereiken.

Echter zijn er ook nog andere elementen aanwezig, zoals een text en select. Aangezien hierop ook geklikt kan worden, moet de selectie niet veranderen dat hierop geklikt wordt.

Omdat een fotovoorbeeld meer zegt dan 1000 woorden, heb ik een geconsolideerd voorbeeld online gezet op http://jsfiddle.net/7gZTF/3/

In Chrome en Safari werkt het geheel naar behoren, echter in IE9 en FF gaat het mis bij het klikken op een optie van de selectbox. In dat geval wordt er toch de waarde van de checkbox veranderd.

Heeft iemand een tip hoe dit anders op zou kunnen zetten? De "event.target.type" is bij het klikken op een option uit de select "undefied" bij IE9/FF, dus daarop kan ik helaas niet vertrouwen.

Kortom, het is de bedoeling dat de waarde van de checkbox alleen veranderd als er in de (lege) ruimte van de tr wordt geklikt en niet op een van de form-elementen.

[RobIII]

JavaScript:

if (event.target.type !== 'checkbox'
    && event.target.type !== 'text'
    && event.target.type !== 'select-one') {

Is het niet veel handiger om te kijken of 't type "tr" is en dan de toggle uit te voeren Niet "blacklisten" van elementen (wat als je weer andere elementen in gaat toevoegen) maar "whitelisten" => alléén bij een klik op een TR.

[ Voor 26% gewijzigd door RobIII op 24-11-2011 19:07 ]

[R4gnax]

Wat RobIII zegt: gebruik een whitelist. Een beetje slim combineren van 'this' en 'event.target'

Verder is het een stuk efficienter om een andere selector voor de checkbox te gebruiken, want de ':checkbox' pseudo-selector gaat niet via querySelectorAll, maar via het software pad. En voor het manipuleren van de checked property gebruik je de prop functie, niet de attr functie.

JavaScript:

$( document ).ready( function() {

  $( "tr" ).on( "click", function( event ) {
    var whitelist = $( this ).children().andSelf();

    if ( whitelist.index( event.target ) !== -1 ) {
      $( "input[type='checkbox']" ).prop( "checked", function( index, value ){ return !value; });
    }
});

[Ventieldopje]

Helemaal mee eens en R4gnax brengt een mooie oplossing, maar lijkt mij traag worden als je veel child elements hebt.

Een snellere oplossing (maar niet zo flexibel) is, credits naar RobIII overigens:

JavaScript:

$(document).ready(function() {
    //als er op de tr geklikt wordt, dan de checkbox waarde omkeren

    $('tr').click(function(event) {

        //niet de waarde wijzigen als het een checkbox of select is
    
         if (event.target.nodeName == "TD" || event.target.nodeName == "TR"){
            $(':checkbox', this).attr('checked', function() {
                //waarde van de checkbox omkeren      
                return !this.checked;
            });
        }
    });
});

Hier toggled hij alleen de checkbox als je op de regel drukt

[bartbh]

Thanks! White list is inderdaad logischer

Met het voorbeeld van R4gnax ben ik eruit gekomen, alleen nog even ervoor gezorgd dat alleen de checkbox in de betreffende row getoggled wordt en niet allemaal.

Eindvoorbeeld staat hier: http://jsfiddle.net/7gZTF/27/


Punt van Ventieldopje is inderdaad ook een goed opmerking, nog even kijken welke optie ik uiteindelijk toe ga passen.

[R4gnax]

Ventieldopje schreef op donderdag 24 november 2011 @ 20:48:
Helemaal mee eens en R4gnax brengt een mooie oplossing, maar lijkt mij traag worden als je veel child elements hebt.

Niet echt traag, aangezien children() direct en enkel de hele array child nodes aanspreekt van het ene tr element waarop geklikt is en index() hoogstens lineaire complexiteit heeft. Je mag hoop ik geen table hebben die 100+ kolommen heeft.

Toegegeven; je kunt wel wat performance winnen met event delegation, zodat er maar één gebonden event handler hoeft te zijn. Dat kan nuttig zijn als je een flink aantal rows hebt. (Zeg ca. 50 of meer.)

JavaScript:

$( document ).ready( function() {

  $( "#myTable" ).on( "click", "tr", function( event ) {
    var whitelist = $( this ).children().andSelf();

    if ( whitelist.index( event.target ) !== -1 ) {
      $( this )
        .find( "input[type='checkbox']" )
        .prop( "checked", function( index, value ){ return !value; });
    }
});

[ Voor 8% gewijzigd door R4gnax op 24-11-2011 21:11 ]