check box selection problem

Thread: check box selection problem

1. Hudson Guest

check box selection problem

: I have 4 check boxes with the same name. What I want that a user <BR>either checks any of first 3 checkboxes or only 4th checkbox.Actually I am calculating price. The total price associated with first 3 check boxes is equal to price associated <BR>with the 4th check box. So a user should not click any of 3 <BR>checkboxes and the 4th checkbox at the same time.Is this possible because the check boxes has the same name which is necessary for some other reason.The check boxes are as follows <BR><BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="1"&#062; <BR><BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="2"&#062; <BR><BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="3"&#062; <BR><BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="6"&#062; <BR><BR>Thanks

2. Senior Member
Join Date
Dec 1969
Posts
96,118

Do you mean ...

...the user can check any 1, 2, or 3 of the first 3 in each group?<BR><BR>I would assume that if you meant that the user could only check one box, regardless, that you&#039;d simply use radio buttons, instead, yes?<BR><BR>So...<BR><BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="1" onClick="cb123(this);"&#062; <BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="2" onClick="cb123(this);"&#062; <BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="3" onClick="cb123(this);"&#062; <BR>&#060;input type="checkbox" id="checkbox1" name="checkbox1" value="6" onClick="cb6(this);"&#062; <BR><BR>&#060;SCRIPT Language=JavaScript&#062;<BR>function cb123( cb )<BR>{<BR>&nbsp; &nbsp; // get the name of the group this cb belongs to...<BR>&nbsp; &nbsp; // ... and use it to find the entire group...<BR>&nbsp; &nbsp; var group = cb.form.elements[ cb.name ];<BR>&nbsp; &nbsp; group[3].checked = false; // uncheck the last box in the group<BR>}<BR><BR>function cb6( cb )<BR>{<BR>&nbsp; &nbsp; // get the name of the group this cb belongs to...<BR>&nbsp; &nbsp; // ... and use it to find the entire group...<BR>&nbsp; &nbsp; var group = cb.form.elements[ cb.name ];<BR>&nbsp; &nbsp; // uncheck all *but* the last box in the group<BR>&nbsp; &nbsp; group[0].checked = group[1].checked = group[2].checked = false; <BR>}<BR>&#060;/script&#062;<BR><BR>You might think that I should check to see if the click is causing the referenced box to transition from checked to unchecked or vice versa. But I can&#039;t see how any of the boxes *can* transition from checked to unchecked and still have the "other" subgroup be checked. <BR><BR>That is, if box 1 is checked and the user unchecks it, how can it hurt to uncheck box 6 at the same time? Box 6 could *not* have *been* checked if box 1 also was, could it?<BR><BR>Try this. <BR><BR>Oh...almost forgot: The boxes are numbered 0,1,2,3 within the group document.FormName.checkboxN[ boxNum ]. That&#039;s just how JS and HTML DOM work.<BR><BR>

3. Hudson Guest

RE: Do you mean ...

I can not understand the group name you are talking about.<BR>can you explain more ! <BR>I want the code running immediatly<BR>Thanks a lot

4. Senior Member
Join Date
Dec 1969
Posts
96,118

Impatient?

We&#039;d all like our code to run immediately, but *sometimes* we need to learn how things work before we can make that happen.<BR><BR>You did *NOT* answer my question about how you wanted it to work, so I don&#039;t know if my *guess* about what you want is correct.<BR><BR>Did you *try* my code? <BR><BR>Anyway, to answer you about group names: In client-side scripting, whether JS or VBS, if you have more than one field in a form with the same name, then *all* the fields with the same name are automatically turned into an array in the script language and then the entire *group* of fields with the same name is given the name of the field...and then you reference individual fields within the group using subscripts into the array.<BR><BR>So, in your case, you have 4 checkboxes all named "checkbox1".<BR><BR>That means that "document.FormName.checkbox1" is *NOT* a checkbox, at all! Instead, it is an *ARRAY* of 4 elements. And to access a single checkbox in the group/array, you use "document.FormName.checkbox1[ elementNumber ]".<BR><BR>But if you don&#039;t understand any of this, why didn&#039;t you just try my code to see if it worked? And then go start reading up on HTML and scripting and all?<BR><BR>

5. Hudson Guest

RE: Impatient?

I want that user click any of first three 1 or (1,2) or (1,3) or (2,3) or (1,2,3) but not fourth. And if user click fourth check box that he should not able to check any of first three checkboxes.<BR>Price 0f first three check boxes is equal to price of fourth check box.<BR><BR>I am trying to run your code but it is showing object not found error at he following lines<BR>var group = cb.form.elements[ cb.name ];<BR>group[0].checked = group[1].checked = group[2].checked = false;<BR>Thanks<BR>

6. Senior Member
Join Date
Dec 1969
Posts
96,118

Works perfectly for me...

In this HTML test page:<BR><BR>******** test.html *******<BR>&#060;HTML&#062;&#060;BODY&#062;<BR>&#0 60;FORM Action="NextPage.asp" Method="POST"&#062;<BR>1 &#060;input type="checkbox" id="checkbox1" name="checkbox1" value="1" onClick="cb123(this);"&#062; <BR>2 &#060;input type="checkbox" id="checkbox1" name="checkbox1" value="2" onClick="cb123(this);"&#062; <BR>3 &#060;input type="checkbox" id="checkbox1" name="checkbox1" value="3" onClick="cb123(this);"&#062; <BR>6 &#060;input type="checkbox" id="checkbox1" name="checkbox1" value="6" onClick="cb6(this);"&#062; <BR>&#060;/FORM&#062;<BR><BR>&#060;SCRIPT Language=JavaScript&#062; <BR>function cb123( cb ) <BR>{ <BR> // get the name of the group this cb belongs to... <BR> // ... and use it to find the entire group... <BR> var group = cb.form.elements[ cb.name ]; <BR> group[3].checked = false; // uncheck the last box in the group <BR>} <BR>function cb6( cb ) <BR>{ <BR> // get the name of the group this cb belongs to... <BR> // ... and use it to find the entire group... <BR> var group = cb.form.elements[ cb.name ]; <BR> // uncheck all *but* the last box in the group <BR> group[0].checked = group[1].checked = group[2].checked = false; <BR>} <BR>&#060;/script&#062; <BR><BR>&#060;/BODY&#062;&#060;/HTML&#062;<BR>******* end of test ********<BR><BR>Did you, by chance, forget to put your checkboxes inside a &#060;FORM&#062;??? If you do that, they might display okay, but then they will never work properly. As in this code or as in trying to send their values to the next page.<BR><BR>That "test.html" page works perfectly for me. What happens if you try it?<BR><BR>But I&#039;m going to bed now. Good luck.<BR><BR>

7. Hudson Guest

Thanks

Thanks a lot.

Posting Permissions

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