PDA

View Full Version : check/uncheck input checkboxes in form table



Strangeplant
10-26-2015, 02:20 PM
I have several rows of text boxes, in pairs. Pairs are so I can check changed states for updating a mysql database. Program is php that writes the html. So, when the first (left) check box is changed, the complement (right in the pair) must be changed to the opposite state, checked or unchecked. The second (right) one of the pair will be thrown off page so it will not be seen. It is disabled anyway, so it cannot be manually changed. The code that results from the php writes basically looks like this for one of the several lines:

<td><input class="boxer" name="tablite['name']" type="checkbox" /></td>
<td><input class="boxes offscreen" name="untablite['name']" type="checkbox" disabled="disabled" /></td>
<td><input class="boxet" name="plotite['name']" type="checkbox" /></td>
<td><input class="boxeu offscreen" name="unplotite['.$lineitem['profilenum'].']" type="checkbox" disabled="disabled" /></td>
<td class="boxes">some value</td><td class="boxed">some text</td>'."\n";

Then there is the jQuery, which doesn't work like I think it should. It is supposed to change the checked to unchecked, or the other way around:

$('.proxi').change(function () {
var checkbx = $(this).next('input[type="checkbox"]'),
dis = checkbx.prop('checked');
checkbx.prop('checked', !dis);
});
I have tried everything that I can think of, but I can't get to the input in the next td. proxi is the class name of the table, and I do know that it does get into the function. Can someone suggest a way to change the property of the 2nd and 4th input when the 1st and 3rd are changed?

Beverleyh
10-26-2015, 03:57 PM
Maybe $(this).closest('td').next('input[type="checkbox"]').hasClass('offscreen')?

If you need more help, please provide a link to your page or a reduced case demo in something like JSBin, JSFiddle or CodePen

Strangeplant
10-27-2015, 12:50 PM
Beverly, Thank you for your reply. I have completely given up with the selector input[type="checkbox'] as it seems just to not find it from the document tree. So, I instead used the class selectors that I had made for formatting, boxer and boxes like this:

$('.boxer').change(function(){
var which = $(this);
var checkbx = which.parent().next().find('.boxes'),
dis = checkbx.prop('checked');
checkbx.prop('checked', !dis);
});And then I added the css rule to push the one that I didn't want to be visible off the page:
.offscreen {position: absolute;left: -999em;}I'm sure that there are other jQuery/javascript ways that I haven't found, but this works for me, and I spent so much time on this one! Too bad there wasn't an example for this on the internet. I was surprised to later find that the second array was not sent in the POST action. Evidently when an input is disabled, even though the check shows in a greyed box, the array is also disabled, and this makes absolutely no sense because it is necessary. Without this second array, you cannot know if a box has been changed, because all POST arrays (radio buttons and check boxes) contain only the checked elements.

My final code for the checkboxes in the page (in php because there are a variable number of rows) is like this, just in case anyone is interested:
foreach($oldeliveries as $lineitem) {
echo '<tr>'."\n";
foreach($areas as $site) {
if($lineitem['profilenum'] == $site['profilenum']) {
$ckd1a = ($lineitem['emailtable'] == 0) ? '' : 'checked="checked"';
$ckd1b = ($lineitem['emailtable'] == 1) ? '' : 'checked="checked"';
$ckd2a = ($lineitem['emailplot'] == 0) ? '' : 'checked="checked"';
$ckd2b = ($lineitem['emailplot'] == 1) ? '' : 'checked="checked"';
echo '<td><input class="boxer" name="tablite['.$lineitem['profilenum'].']" type="checkbox" '.$ckd1a.'/></td>';
echo '<td><input class="boxes offscreen" name="untablite['.$lineitem['profilenum'].']" type="checkbox" '.$ckd1b.' /></td>';
echo '<td><input class="boxer" name="plotite['.$lineitem['profilenum'].']" type="checkbox" '.$ckd2a.' /></td>';
echo '<td><input class="boxes offscreen" name="unplotite['.$lineitem['profilenum'].']" type="checkbox" '.$ckd2b.' /></td>';
echo '<td class="boxes">'.$lineitem['profilenum'].'</td><td class="boxed">'.$site['note'].'</td>'."\n";
break;
}
}
echo "</tr>"."\n";
}