JavaScript Checkbox mit JS setzen

rony12

Commodore Pro
Registriert
Jan. 2007
Beiträge
4.962
Hallo,

ich bin es wieder :)

ich habe eine Tabelle gebaut, in der Datensätze aus einer Datenbank angezeigt werden.

in dieser Tabelle sollen nun einzelne Datensätze markiert werden können, damit später alle fehlenden (nicht angeklickten) Einträge aus der Datenbank gelöscht werden können.

Diese ganze Ansicht ist für mobile Geräte gedacht, also Smartphone und Tablets.
Dabei hab ich die gesamte Zeile anklickbar gemacht.
Dabei wird dann auch der Hintergrund geändert.
Wenn man erneut darauf klickt, wird die Maskierung wieder entfernt.

Da es später eben durch ein Formular abgefragt werden soll, hab ich eine kleine Checkbox davor gemacht.

Nun steh ich aber vor dem Problem, dass wenn ich die Zeile anklickte, diese zwar markiert wird, die Checkbox aber weiterhin inaktiv ist.
Ich würde nun durch das alleineige klicken auf die Zeile die Checkbox aktivieren.

ich habe exemplarisch eine kleine Tabelle gebaut, die ähnlich aussieht ;)


HTML:
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="blue_style.css" />
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="jquery.tablesorter.js" type="text/javascript"></script>
    
    <script type="text/javascript">
            $(function() 
            { 
                $("#myTable").tablesorter(); 
            } 
            );    
    </script>
    <script type="text/javascript">
        <!--
            function toggleBgColor(elem) {
                var style2 = elem.style;
                style2.backgroundColor = style2.backgroundColor? "":"#FFFF00";
            }
        //-->
        </script>
    
</head>

<body>
    <table id="myTable" class="tablesorter">
        <thead> 
        <tr onclick="javascript:toggleBgColor( this );"> 
            <th>checkbox</th> 
            <th>First Name</th> 
            <th>Email</th> 
            <th>Due</th> 
            <th>Web Site</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="1"></td> 
            <td>John</td> 
            <td>jsmith@gmail.com</td> 
            <td>$50.00</td> 
            <td>http://www.jsmith.com</td> 
        </tr> 
        <tr onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="2"></td> 
            <td>Frank</td> 
            <td>fbach@yahoo.com</td> 
            <td>$50.00</td> 
            <td>http://www.frank.com</td> 
        </tr> 
        <tr onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="3"></td> 
            <td>Jason</td> 
            <td>jdoe@hotmail.com</td> 
            <td>$100.00</td> 
            <td>http://www.jdoe.com</td> 
        </tr> 
        <tr onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="4"></td> 
            <td>Tim</td> 
            <td>tconway@earthlink.net</td> 
            <td>$50.00</td> 
            <td>http://www.timconway.com</td> 
        </tr> 
        </tbody> 
    </table> 
</body>
</html>

http://inventar.flbserver.de/test.html
 
hier jquery code für deine toggleBgColor die du eogentlich auch besser in jquery machen könntest mit toggleClass
HTML:
$(elem).find('input').prop('checked',true);
 
Hallo,

also zum einen wäre es praktisch, wenn du den Inputs das Attribut name mitgibst, sonst sind die (bis auf dass sie da sind) recht sinnlos.

das sollte gehen (nicht genau probiert):

JS (in der toggleBgColor):
Code:
$('input[name="checkbox-' + elem.id + '"]').attr('checked', 'checked');

HTML:
Code:
<tr id="1" onclick="javascript:toggleBgColor( this );"> 
<td><input type="checkbox" name="checkbox-1"></td> 
<td>John</td> 
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
 
Zum Wohle der Usability:
1.) keine Tabellen
2.) <label for="checkbox_1">bla</label><input type="checkbox" id="checkbox_1">

Das Standard-Verhalten für Labels ist, dass ein Klick auf sie den Fokus auf das zugeordnete Eingabeelement legt. Ist das Element eine Textbox, dann kann man nachm Label-Klick direkt lostippen. Ist es ein Radiobutton oder ne Checkbox, dann wird das Ding checked/unchecked.
Nur für Safari-iOS muss man hier dann einen kleinen JS-Workaround machen, der ist zu dämlich dafür. Da hat Apple derb gepfuscht. Im Endeffekt schreibst du aber nur einen kleinen JS-Bugfix, der nur auf iPad & iPhone ausgeführt wird, anstatt für ALLE Besucher ein JS-Monster zu verwenden. Performance ist toll...
 
ich hab jetzt eure beiden lösungen probiert...

das einmalige aktivieren funktioniert...
wenn ich jedoch die checkbox wieder anklicke, dann wird die box nicht "geuncheckt".

sieht man bei der seite, die ich verlinkt habe...

HTML:
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="blue_style.css" />
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="jquery.tablesorter.js" type="text/javascript"></script>
    
    <script type="text/javascript">
            $(function() 
            { 
                $("#myTable").tablesorter(); 
            } 
            );    
    </script>
    <script type="text/javascript">
            function toggleBgColor(elem) {
                var style2 = elem.style;
                style2.backgroundColor = style2.backgroundColor? "":"#FFFF00";
                $(elem).find('input').prop('checked',true);
            }
        </script>
    
</head>

<body>

<form name="auslese" action="#">
    <table id="myTable" class="tablesorter">
        <thead> 
        <tr> 
            <th>checkbox</th> 
            <th>First Name</th> 
            <th>Email</th> 
            <th>Due</th> 
            <th>Web Site</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr id="1" onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="1" name="checkbox-1"></td> 
            <td>John</td> 
            <td>jsmith@gmail.com</td> 
            <td>$50.00</td> 
            <td>http://www.jsmith.com</td> 
        </tr> 
        <tr id="2" onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="2" name="checkbox-2"></td> 
            <td>Frank</td> 
            <td>fbach@yahoo.com</td> 
            <td>$50.00</td> 
            <td>http://www.frank.com</td> 
        </tr> 
        <tr id="3" onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="3" name="checkbox-3"></td> 
            <td>Jason</td> 
            <td>jdoe@hotmail.com</td> 
            <td>$100.00</td> 
            <td>http://www.jdoe.com</td> 
        </tr> 
        <tr id="4" onclick="javascript:toggleBgColor( this );"> 
            <td><input type="checkbox" id="4" name="checkbox-4"></td> 
            <td>Tim</td> 
            <td>tconway@earthlink.net</td> 
            <td>$50.00</td> 
            <td>http://www.timconway.com</td> 
        </tr> 
        </tbody> 
    </table> 
</body>
</html>
 
Zuletzt bearbeitet:
dirty aber dürfte gehen
HTML:
if ($(elem).find('input').prop('checked')) {
  $(elem).find('input').prop('checked',false);
} else {
  $(elem).find('input').prop('checked',true);
}
 
jau, schon besser :)

gegen dirty gibt es nichts zu sagen ;)

nun haben die checkboxen noch nicht ganz das verhalten... kannste dir gerne noch anschauen

edit:
mir kam gerade die idee, die checkboxen einfach nicht anzuzeigen... weil die farbliche makierung reicht ja...die checkboxen wären unsichtbar, und würden im hintergrund gesetzt werden.
 
Zuletzt bearbeitet:
mach mal statt visbility:hidden besser display:none
weil dann wird kein platz verschwendet..
eventuell das ganze von neu auf hinnden input fields aufbauend schreibend und sauberer
 
Zuletzt bearbeitet von einem Moderator:
Zurück
Oben