Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks
function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).
Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/
I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.
Related
I have a form with multiple checkboxes and each checkbox as an input field associated with it that'll activate once you check the checkbox.
I've got the frontend working just fine, but I was wondering how can I read in my PHP which checkboxes were checked along with their respective input fields (and some have a radio button too in addition to the input field)
Here's what each individual checkbox in my form looks like:
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
I haven't wrapped my head around the PHP yet but previously to read multiple checkboxes I put them all in an array in the name field and read that array in PHP. However, that was without the added complication of each checkbox having input field.
Does anyone have any idea how to do this?
You want to use an associative array for both the inputs and the checkboxes.
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
<input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
</div>
</div>
</div>
<!-- Option 1 ends -->
For option 2 use items[2][chosen] and items[2][quantity], etc.
Note that must specify the index and can't use []. Otherwise, the index of quantity will not match the chosen item.
In php you can loop through the items and ignore the items that aren't chosen.
foreach ($_POST['items'] as $item) {
if (!isset($item['chosen'])) continue; // Skip items that aren't chosen.
echo $item['quantity'] . ' ' . $item['chosen'] . "\n";
}
Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)
could really use some help right about now! I'm brand new to javascript and am totally stuck. I would REALLY appreciate someone taking the time to help me out here with some javascript.
I'm creating a mobile app using JQUERY and PhoneGap. I have a "create your own" ToDo list feature. Basically someone selects the options on one page and then they are added to the ToDo list which is another page.
Here's some example HTML:
<div data-role="page" id="CreateChecklist">
<div ="header">
<div class="logo"></div>
</div>
<div data-role="header">
<h1>ToDo Checklist</h1>
</div>
<div data-role="content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible" class="checklist1" id="checklist1">
<h3> Support Network </h3>
<p><fieldset data-role="controlgroup" name="checklist1" class="checklist2">
<input type="checkbox" name="checklist1" id="checklist1_0" class="checklistA" `enter code here`value="1" />
<label for="checklist1_0">Create and mobilize support network</label>
<input type="checkbox" name="checklist1" id="checklist1_1" class="checklistA" value="1" />
<label for="checklist1_1">Set up meeting to discuss intervention logistics</label>
<input type="checkbox" name="checklist1" id="checklist1_2" class="checklistA" value="1" />
<label for="checklist1_2">Assign a "detail person"</label>
<input type="checkbox" name="checklist1" id="checklist1_3" class="checklistA" value="1" />
<label for="checklist1_3">Designate the Intervention Facilitator</label>
<input type="checkbox" name="checklist1" id="checklist1_4" class="checklistA" value="1" />
<label for="checklist1_4">Make clear to not alert the person of concern</label>
<input type="checkbox" name="checklist1" id="checklist1_22" class="checklistA" value="1" />
<label for="checklist1_22">Chair person creates an "opening" and "closing" dictation</label>
<input type="checkbox" name="checklist1" id="checklist1_24" class="checklistA" value="1" />
<label for="checklist1_24">Create a list of personal support options (Al-Anon, therapy, etc)</label>
</fieldset>
After the person has selected their checkboxes they click the button:
<a href="#ToDoChecklist" id="add">
<button>Submit</button></a>
I then need the selected checklists to be added to the other page:
<div data-role="page" id="ToDoChecklist">
<div ="header">
<div class="logo"></div>
</div>
<div data-role="header">
<fieldset data-role="controlgroup" name="checklist2" class="checklist2" id="checklist2">
</fieldset>
</div>
<div data-role="content">
<h3> Content </h3>
</div><a href="#TakingAction">
<div data-role="footer">
<h1>Back - Taking Action</h1>
</div></a>
</div>
as far as I know theres no way to "move" elements from the current page to one that is yet to be loaded in javascript (without having some sort of callback on the jquery changePage method). instead consider passing the information in the
href="#ToDOChecklist&checkbox1=selected&checkbox2=selected"
then use this information the populate the checkboxes in the new page
I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!
You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});
I have this basic HTML structure:
<fieldset>
<input/>
<label></label>
<div class="toggle_box">
<div class="switch"></div>
</div>
</fieldset>
I would like this to happen when my input is checked:
<fieldset>
<input checked="checked" />
<label></label>
<div class="toggle_box">
<div class="switch" state="on"></div>
</div>
</fieldset>
Add state="on" to the switch div. Is there any selector in jquery I can use to get the checked state of that particular input? (there are multiple on a page).
Thanks for your brainstorming!
This works; you'll need to add type="checkbox" to your inputs to make them checkboxes. (Observe the effect by inspecting the switch divs with Chrome's Dev Tools or Firebug.)
$('fieldset input[type=checkbox]').change(function() {
var el=$(this).parent().find('.switch');
if ($(this).is(':checked')) el.attr('state','on');
else el.removeAttr('state');
});
You can put all these divs inside another div, and then get the father div with*document.getElementById*, find the div you want in the content and change him.
<div id="fatherOfTheDivs">
<fieldset>
<input/>
<label></label>
<div class="toggle_box">
<div id="div1" class="switch"></div>
</div>
</fieldset>
<fieldset>
<input/>
<label></label>
<div id="div2" class="toggle_box">
<div class="switch"></div>
</div>
</fieldset>
</div>
This will accomplish it for you.
$('input:checkbox').change(function () {
if ($(this).is(':checked')) {
$(this).parent().children('div.toggle_box').children('div.switch').attr('state', 'on');
} else {
$(this).parent().children('div.toggle_box').children('div.switch').removeAttr('state');
}
});
You'll also have to modify your <input /> to <input type="checkbox" />