Jquery select Incrementing ID's of Form Items

I have a form with multi-value fieldset with each field wrapper and interior divs set with id incrementing by 1 number to differentiate the id's. If the checkbox is checked for the checkbox form item within an individual field set, I need to hide the divs that wrap the form items that follow within that field set. A problem that I'm running into is that the name of the id's contain a unique value within the middle of the string. Example: "#beginningofIDSting-X-endofStringName". I can't change the ID or add classes to the wrappers.

<div id="edit-field-gallery-images-0-ahah-wrapper">
<div id="edit-field-gallery-images-0-data-revise-wrapper" class="form-item">
<label class="option" for="edit-field-gallery-images-0-data-revise">
<input id="edit-field-gallery-images-0-data-revise" 
class="form-checkbox revise-check" 
type="checkbox" checked="checked" 
value="1" name="field_gallery_images[0][data][revise]">
Revise This Description
</label>
</div>

<div id="edit-field-gallery-images-0-data-revisedby-wrapper" class="form-item">
//Stuff in Here
</div>

<div id="edit-field-gallery-images-0-data-revisedon-wrapper" class="form-item">
//Stuff in Here
</div>
</div>//End #edit-field-gallery-images-0-data-revisedby-wrapper

<div id="edit-field-gallery-images-1-ahah-wrapper">
<div id="edit-field-gallery-images-1-data-revise-wrapper" class="form-item">
<label class="option" for="edit-field-gallery-images-1-data-revise">
<input id="edit-field-gallery-images-1-data-revise" 
class="form-checkbox revise-check" 
type="checkbox" checked="checked" 
value="0" name="field_gallery_images[1][data][revise]">
Revise This Description
</label>
</div>
//Stuff in Here
</div>

 <div id="edit-field-gallery-images-1-data-revisedby-wrapper" class="form-item">
<div id="edit-field-gallery-images-1-data-revisedon-wrapper" class="form-item">
//Stuff in Here
</div>
</div>//End #edit-field-galle开发者_JAVA百科ry-images-1-data-revisedby-wrapper

Here's my jquery

$("input[type='checkbox'][id$='-data-revise']:checked").each(function(){

    $(this).next("[id$=-data-revisedby-wrapper]").hide();   
    $(this).find("[id$=-data-revisedon-wrapper]").hide();   


 });

I used a comination of jfriend00's and user625037's solutions. Here it is:

 $("div[id$=data-revisedby-wrapper]").hide();
  $("div[id$=data-revisedon-wrapper]").hide();

$("input[id^=edit-field-gallery-images]:checked").each(function() {
    var startPos = "edit-field-gallery-images-".length;
    var endPos = this.id.indexOf("-", startPos);
    var id = this.id.substring(startPos, endPos);

        $("div[id$="+id+"-data-revisedby-wrapper]").show();
        $("div[id$="+id+"-data-revisedon-wrapper]").show();



});


$(".revise-check").change(function() {
     if(this.checked) {
    $("#" + this.id + "by-wrapper").fadeIn();
    $("#" + this.id + "on-wrapper").fadeIn();
     }
     else{  
     $("#" + this.id + "by-wrapper").fadeOut();
    $("#" + this.id + "on-wrapper").fadeOut();
         }
});

---

bind click event for input that have id start with edit-field-gallery-images and extract id from the id of the input object. quick sample code:

// bind click event for input with id start with edit-field-gallery-images
$("input[id^=edit-field-gallery-images]").click(function() {
    var startPos = "edit-field-gallery-images-".length;
    var endPos = this.id.indexOf("-", startPos);
    var id = this.id.substring(startPos, endPos);
    if(this.checked) {
        $("#edit-field-gallery-images-" + id + "-ahah-wrapper").show();
    }
    else {
        $("#edit-field-gallery-images-" + id + "-ahah-wrapper").hide();
    }
});

---

If I understand your question appropriately, you want to hide some of the divs with ids derived from the checkbox id that follow the checkbox when the checkbox is unchecked. You can use this jQuery to hide the divs with the derived ids:

$("#edit-field-gallery-images-0-data-revise, #edit-field-gallery-images-1-data-revise").change(function() {
    $("#" + this.id + "dby-wrapper").toggle(this.checked);
    $("#" + this.id + "don-wrapper").toggle(this.checked);
});

For this to work, you will have to fix your HTML as some of the divs are not closed properly.

You can see this work here: http://jsfiddle.net/jfriend00/bSnCt/. Click the checkboxes on/off to see how content below is hidden.

If I didn't understand the question correctly, then please clarify in your question so others can understand too.

For N checkboxes (where N is a large and arbitrary number), then you need to assign a common class name to each checkbox and then you can use jQuery like this and it will give this behavior to all the checkboxes:

$(".autoCheckbox").change(function() {
    $("#" + this.id + "dby-wrapper").toggle(this.checked);
    $("#" + this.id + "don-wrapper").toggle(this.checked);
});

If you control the HTML for this, then this notion of manipulating ID strings is not the easiest way to do it. It's much better to give the things you want to hide a common class name (like "autoHide") and then put a container div around a given checkbox and the content you want to hide. Then, you could make it all work like this:

$(".autoCheckbox").change(function() {
    $(this).parent().find(".autoHide").toggle(this.checked);
});

And the complicated ID values aren't used at all. Because each checkbox and hidable content are contained in their own container div, you can have as many of these as you want in the page and the checkbox knows which content to hide by finding items in the same parent with a given class name. It can be quite elegant.

Here's the simple version with no ids, only classes and containers:

http://jsfiddle.net/jfriend00/7VTMy/

<div class="container">
    <label>
        <input class="autoCheckbox" type="checkbox" checked="checked"> Check here to show related content 1
    </label>
    <div class="autoHide">Line 1</div>
    <div class="autoHide">Line 2</div>
</div>
<br><br>
<div class="container">
    <label>
        <input class="autoCheckbox" type="checkbox" checked="checked"> Check here to show related content 2
    </label>
    <div class="autoHide">Line 1</div>
    <div class="autoHide">Line 2</div>
</div>

And, the JS code to control it:

$(".autoCheckbox").change(function() {
    $(this).closest(".container").find(".autoHide").toggle(this.checked);
});

---

You can use RegEx against the id when you check the box, you could then use the returned value to select the matching elements.

$("input[type=checkbox][id^=edit-field-gallery-images-]").change(function (e) {
    var checked = $(this).is(':checked'),
        match = $(this).attr("id").match(/^edit-field-gallery-images-([\d+])-data-revise$/);
    if (checked) {
        $('#edit-field-gallery-images-' + match[1] + '-data-revisedby-wrapper').show();
        $('#edit-field-gallery-images-' + match[1] + '-data-revisedon-wrapper').show();
    } else {
        $('#edit-field-gallery-images-' + match[1] + '-data-revisedby-wrapper').hide();
        $('#edit-field-gallery-images-' + match[1] + '-data-revisedon-wrapper').hide();
    }
});