Results 1 to 3 of 3

Thread: check/uncheck input checkboxes in form table

  1. #1
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default check/uncheck input checkboxes in form table

    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:
    Code:
    			<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:
    Code:
    		$('.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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Last edited by Beverleyh; 10-26-2015 at 04:03 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default

    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:
    Code:
    $('.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:
    Code:
    .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:
    Code:
    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";
    	}

Similar Threads

  1. Resolved Uncheck all checkboxes and clear localStorage at the same time.
    By qwikad.com in forum JavaScript
    Replies: 2
    Last Post: 09-08-2015, 04:46 PM
  2. Resolved Uncheck a checkbox if another is checked (3 checkboxes)
    By qwikad.com in forum JavaScript
    Replies: 8
    Last Post: 04-24-2014, 08:07 PM
  3. How to uncheck-disable, remaing checkboxes
    By gootynz in forum JavaScript
    Replies: 0
    Last Post: 01-24-2012, 02:00 PM
  4. Form field check for specific input
    By codeparrot in forum JavaScript
    Replies: 4
    Last Post: 01-15-2011, 06:22 AM
  5. [DHTML] Check/Uncheck columns script
    By jscheuer1 in forum Submit a DHTML or CSS code
    Replies: 3
    Last Post: 09-17-2006, 08:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •