点击行的jQuery切换元素

Question

This is supposed to be a client list, where you click the rows to select them and then submit them to database for cron job to pick them up and send email to them.

I'm trying highlight rows instead of using checkboxes, thats why I put two hidden elements one for the client id, other - bool for checking if row has been clicked or not.

What I can't figure out is how to toggle the specific row's element value(checked).

<table>
<tbody>
<tr class="contactrow">
<input type="hidden" name="id" value="995"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Andrew Ostrich</td>
<td>AO Company</td>
<td>7537535</td>
<td>ao@aocompany.com</td>
</tr>
<tr class="contactrow">
<input type="hidden" name="id" value="296"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Brendon Evans</td>
<td>Institute of Modern Arts</td>
<td>648648468</td>
<td>bevans@ioma.co.uk</td>
</tr>
<tr class="contactrow">
<input type="hidden" name="id" value="421"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Rudy Thompson</td>
<td>Marine CORP</td>
<td>95939288</td>
<td>Rudee@mcorp.es</td>
</tr>
</tbody>
</table>

​ Also, http://jsfiddle.net/FHjAc/

Answer 1

Part of the problem is that the server won't be able to identify which client ids has been checked. All of the input[type=checkbox] share the same name attribute, which is what is used to identify each parameter.

If you change the name attribute to checked[__ID__] , then you can loop over the parameters and submit those records to the database.

In PHP you would do the following.

<?php

$checked = $_POST['checked'];

foreach( $checked as $id ) {
  // do something with the $id here
}

Update

I didn't realize you were using a hidden input for the checked field. If you change it to a checkbox you're job should be a lot easier.

HTML This is how I would markup my HTML, you can use CSS to hide the checkbox with display: none .

<tr class="contactrow">
  <td>
    <input type="checkbox" name="checked[421]" />
    Rudy Thompson
  </td>
  <td>Marine CORP</td>
  <td>95939288</td>
  <td>Rudee@mcorp.es</td>
</tr>

jQuery

$(function () {
  $('.contactrow').click(function () {
    var checkbox = $(this).find('input[type=checkbox]');
    checkbox.prop('checked', !checkbox.prop('checked'));
    $(this).toggleClass('contactrow_highlight');
  });  
});

Answer 2

I tested this and it works for me.

$(function () {
    $('.contactrow').click(function () {
        $(this).toggleClass("contactrow_highlight");
        $(this).find("input").each(function(){
            if($(this).attr("name") == "checked"){
                if($(this).val() == "FALSE"){
                    $(this).val("TRUE");
                } else {
                    $(this).val("FALSE");                   
                }
            }
        });
    });
})

Answer 3

Here you go: http://jsfiddle.net/AuYZf/1/

You can get the siblings of the first child of the row element you clicked, the third appears to be the desired element. Then you can simply toggle the value:

var inputElement = this.firstChild.nextSibling.nextSibling.nextSibling;
inputElement.value = (inputElement.value != "true")

(I used != because the string "false" still evaluates as true)
And it doesn't even use jQuery to loop through everything.