document.myform.checkbox.checked without a form

问题

i know that what i mentioned on the question (above) isn't possible, but i have a problem here, i have double tripe and so on, forms inside a page, and i need to submit a form that gets all the data inside the previous forms.

WARNING: I started with javascript like 3 or 4 days ago, i am used to the server-side programming.

Let's see:

javascript checks if checkboxes are checked (Several of them):

function KeepCount() {

var NewCount = 0;

if (document.iphone3g.iphone3g1.checked)
{NewCount = NewCount + 1;}

if (document.iphone3g.iphone3g2.checked)
{NewCount = NewCount + 1;}

if (document.iphone3g.iphone3g3.checked)
{NewCount = NewCount + 1;}

if (document.iphone3g.iphone3g4.checked)
{NewCount = NewCount + 1;}

if (document.iphone3gs.iphone3gs1.checked)
{NewCount = NewCount + 1;}

if (document.iphone3gs.iphone3gs2.checked)
{NewCount = NewCount + 1;}

if (document.iphone3gs.iphone3gs3.checked)
{NewCount = NewCount + 1;}

if (document.iphone3gs.iphone3gs4.checked)
{NewCount = NewCount + 1;}

if (document.iphone4.iphone41.checked)
{NewCount = NewCount + 1;}

if (document.iphone4.iphone42.checked)
{NewCount = NewCount + 1;}

if (document.iphone4.iphone43.checked)
{NewCount = NewCount + 1;}

if (document.iphone4.iphone44.checked)
{NewCount = NewCount + 1;}

if (NewCount > 1){
    descontox = 20/100;
    valorx = (total.value * descontox).toFixed(2);
    valor.value  = (total.value - valorx).toFixed(2);
    }

if (NewCount <= 1){
    valor.value = ("");}
}

This tells me if a discount should be applied or not, if more than one checkbox is selected it will apply a 20% discount.

If you notice, i have several "if (document.iphone3g.iphone3g1.checked) { do something} that interacts with this:

    <div id="one" class="hiddenDiv">

            <div class="image">
                <img class="large" src="images/iphone3g.png" alt="iphone3g" width="141" height="141" />
            </div>
            <form name="iphone3g">
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3g1" value="50.00"> Vidro Partido<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3g2" value="59.00"> LCD Danificado<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3g3" value="80.00"> Substituir capa traseira<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3g4" value="38.00"> Botão Volume
            </form>
    </div>
            <div id="two" class="hiddenDiv">

            <div class="image">
                <img class="large" src="images/iphone3gs.png" alt="iphone3g" width="141" height="141" />
            </div>
    <form name="iphone3gs">
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3gs1" value="60"> Vidro Partido 3GS<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3gs2" value="69"> LCD Danificado 3GS<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3gs3" value="89"> Substituir capa traseira 3GS<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone3gs4" value="45"> Botão Volume3GS

    </form>
    </div>
            <div id="three" class="hiddenDiv">

            <div class="image">
                <img class="large" src="images/iphone4.png" alt="iphone3g" width="141" height="141" />
            </div>
    <form name="iphone4">
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone41" value="169"> Vidro/LCD Partido<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone42" value="99"> Substituir capa traseira<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone43" value="79"> Botão Volume<br />
    <input onclick="clickCh(this);KeepCount();" type="checkbox" name="iphone44" value="76"> Botão Home

    </form>
    </div>

I have more than 3 of those, what can i do to solve the question? i need to submit these data to a php file.

回答1:

Using jQuery, this could be done very succinctly.

// select all checked checkboxes with name attribute that starts with 'iphone'
var NewCount = $("input[name^='iphone']:checked").length;

if (NewCount > 1){
    descontox = 20/100;
    valorx = (total.value * descontox).toFixed(2);
    valor.value  = (total.value - valorx).toFixed(2);
    }

if (NewCount <= 1){
    valor.value = ("");}
}

EDIT: souza -- It appears based on your comments that you have already solved the issue by using a single form element. However, you would be wise to use a more generic approach like the one above, or the one posted by mrtsherman. Checking each individual input element by name will lead to a code maintenance nightmare.

It would require updating both the your markup and your javascript every time a new iPhone version and/or carrier, platform comes around. A more generic approach would allow you to simply add a new checkbox to the markup using the same naming convention and your javascript will simply handle it without the need to make any changes to the code.

回答2:

Use Jquery. Easy to use for something like this. Here is a jsfiddle with it working.

$(document).ready(function() {
   $("input:checkbox").click(function() {
      var checked = $("input:checked").length;
      alert(checked);
   });
});

来源：https://stackoverflow.com/questions/5096600/document-myform-checkbox-checked-without-a-form

标签

javascript

forms

getelementbyid