Help selecting multiple checkboxes based on partial value

J

JL

Hello,

I have been working on this for days with nothing I try really giving
me a solution. I have so many revisions of code I getting dizzy
looking at my screen.

What I am trying to do is create a button or a checkbox, that when
clicked, will select/unselect the other checkboxes on the entire page
who's values start with a specific character pattern.

For example in need a two separate buttons or checkboxes that can:
select/unselect all checkboxes that have a value starting with 1##
select/unselect all checkboxes that have a value starting with 81##

Can anyone help me out?

An example of the code from the checkboxes I am trying to select from
is below:

<html>
<body>
<TABLE width="50%" border=0>
<TBODY>
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=1##578854 name=BILLINGSLIP> Billing Slip Header
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=21##578854 name=BILLINGSLIP> Clinic Encounter_MRI
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=22##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_Front Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=23##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_ICD9 Page_
1 &amp; 2
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=41##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_Supply Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=81##578854 name=BILLINGSLIP>Patient Registration
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=61##578854 name=BILLINGSLIP>Surgery Charge Ticket
</TR></TBODY></TABLE>
&nbsp;
<TABLE width="50%" border=0>
<TBODY>
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=1##85430 name=BILLINGSLIP> Billing Slip Header
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=21##85430 name=BILLINGSLIP> Clinic Encounter_MRI
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=22##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_Front Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=23##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_ICD9 Page_ 1
&amp; 2
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=41##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_Supply Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=81##85430 name=BILLINGSLIP>Patient Registration
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=61##85430 name=BILLINGSLIP>Surgery Charge Ticket
</TR></TBODY></TABLE>
</body>
</html>
 
V

VK

Hello,

I have been working on this for days with nothing I try really giving
me a solution. I have so many revisions of code I getting dizzy
looking at my screen.

What I am trying to do is create a button or a checkbox, that when
clicked, will select/unselect the other checkboxes on the entire page
who's values start with a specific character pattern.

For example in need a two separate buttons or checkboxes that can:
select/unselect all checkboxes that have a value starting with 1##
select/unselect all checkboxes that have a value starting with 81##

Can anyone help me out?

An example of the code from the checkboxes I am trying to select from
is below:

<html>
<body>
<TABLE width="50%" border=0>
<TBODY>
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=1##578854 name=BILLINGSLIP> Billing Slip Header
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=21##578854 name=BILLINGSLIP> Clinic Encounter_MRI
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=22##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_Front Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=23##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_ICD9 Page_
1 &amp; 2
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=41##578854 name=BILLINGSLIP> Clinic Encounter_OFFICE_Supply Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=81##578854 name=BILLINGSLIP>Patient Registration
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=61##578854 name=BILLINGSLIP>Surgery Charge Ticket
</TR></TBODY></TABLE>
&nbsp;
<TABLE width="50%" border=0>
<TBODY>
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=1##85430 name=BILLINGSLIP> Billing Slip Header
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=21##85430 name=BILLINGSLIP> Clinic Encounter_MRI
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=22##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_Front Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=23##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_ICD9 Page_ 1
&amp; 2
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=41##85430 name=BILLINGSLIP> Clinic Encounter_OFFICE_Supply Page
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=81##85430 name=BILLINGSLIP>Patient Registration
<TR>
<TD><INPUT onclick=UncheckCheckAll(this); type=checkbox
value=61##85430 name=BILLINGSLIP>Surgery Charge Ticket
</TR></TBODY></TABLE>
</body>
</html>

Just one of many ways to do it:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script type="text/javascript">
function f(frm, val) {
var len = frm.elements.length;
for (var i=0;i<len;i++) {
if (('checked' in frm.elements) &&
(frm.elements.value.indexOf(val,0) != -1)) {
frm.elements.checked = !frm.elements.checked;
}
}
}
</script>
</head>
<body>
<h1>Demo</h1>
<form action="">
<fieldset>
<legend>Options 1##4</legend>
<input type="checkbox" name="chk0" value="1##4aaa">
<input type="checkbox" name="chk1" value="1##4bbb">
<input type="checkbox" name="chk2" value="1##4ccc">
</fieldset>
<fieldset>
<legend>Options 123#</legend>
<input type="checkbox" name="chk3" value="123#ddd">
<input type="checkbox" name="chk4" value="123#eee">
<input type="checkbox" name="chk5" value="123#fff">
</fieldset>
<fieldset>
<legend>Check / Uncheck</legend>
<button type="button"
onclick="f(this.form, '1##4')">(Un)Check 1##4*</button>
<button type="button"
onclick="f(this.form, '123#')">(Un)Check 123#</button>
</fieldset>
</form>
</body>
</html>
 
J

JL

Thanks!
This looks like it works for all checkboxes within the form. That
means the buttons also have to be within the form. If the buttons
were not placed within the form, is there some way to make the onclick
action check all checkboxes on the entire page?
 
V

VK

Thanks!
This looks like it works for all checkboxes within the form. That
means the buttons also have to be within the form. If the buttons
were not placed within the form, is there some way to make the onclick
action check all checkboxes on the entire page?

By DTD BUTTON element doesn't have to be within FORM element (unlike
input type="button"), so you can place your button anywhere you want,
even in another frame.
In this case of course BUTTON will not appertain to the FORM in
question so you will need to establish this connection manually. The
simplest could be to name your form and to provide the name to the
function:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script type="text/javascript">
function f(frmName, val) {
var frm = document.forms[frmName];
var len = frm.elements.length;
for (var i=0;i<len;i++) {
if (('checked' in frm.elements) &&
(frm.elements.value.indexOf(val,0) != -1)) {
frm.elements.checked = !frm.elements.checked;
}
}
}
</script>
</head>
<body>
<h1>Demo</h1>
<form name="form01" action="">
<fieldset>
<legend>Options 1##4</legend>
<input type="checkbox" name="chk0" value="1##4aaa">
<input type="checkbox" name="chk1" value="1##4bbb">
<input type="checkbox" name="chk2" value="1##4ccc">
</fieldset>
<fieldset>
<legend>Options 123#</legend>
<input type="checkbox" name="chk3" value="123#ddd">
<input type="checkbox" name="chk4" value="123#eee">
<input type="checkbox" name="chk5" value="123#fff">
</fieldset>
</form>
<p>
<button type="button"
onclick="f('form01', '1##4')">(Un)Check 1##4*</button>
<button type="button"
onclick="f('form01', '123#')">(Un)Check 123#</button>
</p>
</body>
</html>
 
J

JL

I see now.

I did discover 1 small problem when i adjusted the code to change the
buttons to check boxes.

<script type="text/javascript">
function f(frm, val) {
var len = frm.elements.length;
for (var i=0;i<len;i++) {
if (('checked' in frm.elements) &&
(frm.elements.value.indexOf(val,0) != -1)) {
frm.elements.checked = !frm.elements.checked;
}
}
}
</script>


<INPUT onclick="f(this.form, '1##')" type=checkbox
name=CheckOnlySlipHeaders> <b>
<font face="Arial" style="font-size: 11px" color="#666644">
Select All Billing Slip Headers</font></b>

<INPUT onclick="f(this.form, '81#')" type=checkbox
name=CheckOnlyPatReg> <b>
<font face="Arial" style="font-size: 11px" color="#666644">
Select All Patient Registration Forms</font></b>



The first checkbox that is supposed to select any box starting with
the value 1## is actually checking any box containing 1##. So it
selects more boxes that it is supposed to.

For example it selects:
21##
61##
81##

But it does not select:
22##
23##
Because the do not contain 1##.

Is there a way to change this from 'containing' to 'starting with' ?
 
J

JL

I think i fixed it...

I changed
frm.elements.value.indexOf(val,0) != -1))
to
frm.elements.value.indexOf(val,0) == 0))

I will test fully on Monday when i am in the office and see if i need
more tweaking.

Thanks for the help so far!
 
V

VK

I think i fixed it...

I changed
frm.elements.value.indexOf(val,0) != -1))
to
frm.elements.value.indexOf(val,0) == 0))


Right! And sorry, that is what I meant to type:

frm.elements.value.indexOf(val) == 0

so the 0 in argument is not needed; sometimes you think one things but
your fingers are typing what they used to ( == -1 is the most
casual). :)

It also can be made as a RegExp check, I just wanted to keep things as
simple as possible, so used indexOf instead.
 
T

Thomas 'PointedEars' Lahn

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top