JavaScript Checkbox mit JS setzen

rony12 · 20. Juli 2012

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

kling1 · 20. Juli 2012

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);

neo-logism · 20. Juli 2012

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>

Daaron · 20. Juli 2012

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...

rony12 · 20. Juli 2012

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>

kling1 · 20. Juli 2012

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);
}

rony12 · 20. Juli 2012

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.

kling1 · 20. Juli 2012

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

Suche

rony12

Commodore Pro

kling1

Gast

neo-logism

Ensign

Daaron

Fleet Admiral

rony12

Commodore Pro

kling1

Gast

rony12

Commodore Pro

kling1

Gast

Ähnliche Themen