Question

I’m working on a jquery estimating program which is in a form tag. When I’m finished this will be a rather large script. On of many task, I have about 50 check boxes in a group which when checked it will advance a ui slider one step forward. If I uncheck the box it steps the slider back one.

The boxes are all hidden until I click on a radio button which unhides the check boxes at the same time will read how many check boxes are check and return the number to the slider.

I have a function which also adjust the total estimated price each time a box is checked or unchecked.

Sense this is a form……I have a contact.php file which will extract all information from the form and emailed to the website owner.

Now the Big Question is…….I have 50 Check boxes…

A sample of the HTML

  <input type="checkbox" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20" />
  <label id="R_C-helpPage01" class="W_E"></label> 

  <input type="checkbox" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20" /> 
  <label id="R_C-helpPage02" class="R_C"></label> 

  <input type="checkbox" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20" /> 
  <label id="R_C-helpPage03" class="R_C"></label>

A Sample of some of the var

 var helpPage01 = 'Home Page';
 var helpPage02 = 'About Us';
 var helpPage03 = 'Our Services';
 var helpPage04 = 'Contact Us';

Hear is the main function I’m not sure of how to make all these check buttons use just this function without having to make 50 copys of the function for each check box.

My first guess is something like this below

  $('#And 47 more ID's, #helpPage03, #helpPage02, #helpPage01').click(function() 
                                                                and bla bla bla

Function as is now..

            $helpPage.click(function () {
    if ($pages.val() == 20) {
    alert('Please call for a bulk estimate: ' + phoneNumber);
            return false;
            } 

if ($helpPage.is(':checked'))
            {
    var s = $pageSlider,
            val = s.slider("value"),
            step = s.slider("option", "step");
            s.slider("value", val + step);
            $pages.val(("value", val + step));
            $amount.val([("value", val + step) * pageAmount] / [$daySlider.slider("value")]);
            $slideCalc.click();
            }

else {
            var s = $pageSlider,
            val = s.slider("value"),                
            step = s.slider("option", "step");                
            s.slider("value", val - step);        
            $pages.val(("value", val - step));        
            $amount.val([[("value", val - step) * pageAmount] /  $daySlider.slider("value")]]);
            $slideCalc.click();
            }                   
    }); 

More

    $('#R_C-helpPage01').html(helpPage01 + '<br />');
    $('#R_C-helpPage02').html(helpPage02 + '<br />');
    $('#R_C-helpPage03').html(helpPage03 + '<br />');
            $('#R_C-helpPage04').html(helpPage04 + '<br />');

If you need more info to make a reasonable stab at it, let me know.

Answer 1

For each checkbox you should add an extra rel attribute and an additional class

  <input type="checkbox" rel="1" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20 helpcb" />
  <label id="R_C-helpPage01" class="W_E"></label> 

  <input type="checkbox" rel="2" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20 helpcb" /> 
  <label id="R_C-helpPage02" class="R_C"></label> 

  <input type="checkbox" rel="3" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20 helpcb" /> 
  <label id="R_C-helpPage03" class="R_C"></label>

Now, instead of binding the checkbox element 50 times, you can just use a selector and bind all checkboxes to one function. The code below selects all checkboxes that have class “helpcb”

$('input[type="checkbox"].helpcb').click(function(e){
  var id = $(this).attr('rel'); // This will extract the "rel" attribute of the checkbox that was checked
  // do other stuff
});

Also, instead of defining 50 different variables for your help pages, you should use an array

var helpPage = ['About Us', 'Contact Us', 'Other page'];
alert(helpPage[1]); // Alerts 'contact us'