/    Sign up×
Community /Pin to ProfileBookmark

Selecting all the dynamically created radio button

Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks

[CODE]
<script>
function selectAll()
{
var i = 0;

objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}
</script>[/CODE]

[code=php]
<form action=”viewall.php” method=”post” name=”t4″>
while(condition)
{
echo “<td ><input type=’radio’ name='”. $approve.”‘ id=’app’ value=’approve’ /> Approve<br /> </td>
<td ><input type=’radio’ name='”. $approve.”‘ id=’disp’ value=’disapprove’ /> Disapprove<br /> </td> “;
}

<tr><td><input type=”button” name=”all_app” value=”Select All Approve” onclick=”selectAll(this.value);” ></td>
<td><input type=”button” name=”all_app2″ value=”Select All disapprove” onclick=”selectAll(this.value);” ></td>
</tr>
</form>
[/code]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@twseitexJul 20.2011 — onclick="selectAll(this.value);"


function selectAll( ????? ) // pointer argument

{ // A

var i = 0;

objElems = document.t4.elements; // objElems and elements are collection

for(i=0;i<objElems.length;i++)

{ // B

objElems[i].checked =true;

} // B

} // A



two A and two B
Copy linkTweet thisAlerts:
@anishgiriauthorJul 21.2011 — onclick="selectAll(this.value);"


function selectAll( ????? ) // pointer argument

{ // A

var i = 0;

objElems = document.t4.elements; // objElems and elements are collection

for(i=0;i<objElems.length;i++)

{ // B

objElems[i].checked =true;

} // B

} // A



two A and two B
[/QUOTE]




Sorry I did not get this. To make this simple, I have this code below.



[CODE]<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function selectAll()
{
var i = 0;

objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}



}
</SCRIPT>
</HEAD>
<BODY>
<form name="t4">
<table>
<tr>
<td >
<input type='radio' name='one' id='app' value='approve' /> Approve </td>
<td >
<td>
<input type='radio' name='one' id='disp' value='disapprove' /> Disapprove<br /> </tr>
</form >
</td>
</tr>
<tr>
<td >
<input type='radio' name='two' id='app' value='approve' /> Approve </td>
<td >
<td>
<input type='radio' name='two' id='disp' value='disapprove' /> Disapprove<br /> </tr>
</td>
</tr>
<tr><td><input type="button" name="select all approve" value="select all approve" onclick="selectAll()"></td>
<td><input type="button" name="select all disapprove" value="select disapprove" onclick="selectAll()"></td>
</table>

</form>
</body>
</HTML>[/CODE]


How can I make it when I click the select all approve button all the radio button with the label approve will be selected? And vice versa, when I click the button with the label select all disapprove, the radio button with label Disapprove, will be selected. Thanks
Copy linkTweet thisAlerts:
@JMRKERJul 21.2011 — See: http://www.codingforums.com/showthread.php?p=1114474#post1114474

It is considered bad form to post questions simultaneously in two different forums

to pit the responders against each other in an effort to help you.

Post to one, then if you get no helpful responses, post to another after a reasonable delay.
Copy linkTweet thisAlerts:
@anishgiriauthorJul 21.2011 — See: http://www.codingforums.com/showthread.php?p=1114474#post1114474

It is considered bad form to post questions simultaneously in two different forums

to pit the responders against each other in an effort to help you.

Post to one, then if you get no helpful responses, post to another after a reasonable delay.[/QUOTE]


Pardon for this, I will not repeat such thing again, I just need to get this done, but as I told, I will not repeat that again.

So does anybody know the answer? Thanks
Copy linkTweet thisAlerts:
@twseitexJul 21.2011 — Hi,

var ptForm=document.getElementById("t4"); // must be !=null

var ptCollectionOfAllFormElements = ptForm.elements; // must be !=null

var intNumberOfAllFormElements=ptCollectionOfAllFormElements.length; // must be >=0

var ptInputRadio;

var intCounter=0;

function selectAll() // set all elements of form to checked, but have all elements the property .checked ?

{

for(intCounter=0;intCounter<intNumberOfAllFormElements;intCounter++)

{ptCollectionOfAllFormElements[intCounter].checked =true;}

}


function selectOneRadioButtonById(stID) // radio button has .cecked

// stID value of ID of radio button

{

if(stID!=null)

{if(stID!="")

{ptInputRadio=document.getElementById(stID); // input radio every where inside of body, f.e. inside of form

// stID makes different to all others elements inside of body

if(ptInputRadio!=null)

{ptInputRadio.checked=true;} // .cecked exists for radio button

}

}

}


function selectAllRadioButtonsByValue(stValue,boChecked) // set all input radio with same value of attribut VALUE

// stValue value of attribut VALUE

// boChecked true for set .cecked to true, otherwise to false

{

if(stValue!=null)

{if(stValue!="")

{

for(intCounter=0;intCounter<intNumberOfAllFormElements;i++) // elements only inside of form

{

if(ptCollectionOfAllFormElements[intCounter].tagName=="input") // every input element

{

if(ptCollectionOfAllFormElements[intCounter].type=="radio") // every input radio element

{

if(ptCollectionOfAllFormElements[intCounter].value==stValue) // every input radio element with value == stValue

{ptCollectionOfAllFormElements[intCounter].checked=boChecked;}

}

}

}

}

}

}



f.e. <input ID="radioID1" type="radio" value="same_value_for_all_radio_buttons">


<input ID="radioID2" type="radio" value="same_value_for_all_radio_buttons">

<input type="button" id="not_needed_id1" name="not_needed_name1" value="select one radio button by ID" onclick="selectOneRadioButtonById('radioID1');">

<input type="button" id="not_needed_id2" name="not_needed_name2" value="select all radio buttons by value" onclick="selectAllRadioButtonsByValue('same_value_for_all_radio_buttons',true);">


"label" is ID or NAME

value is text-label


==========================================================================

elements Collection (Internet Explorer)

Retrieves a collection, in source order, of all controls in a given form. input type=image objects are excluded from the collection.

Syntax

[ oColl = ] FORM.elements

[ oObject = ] FORM.elements(vIndex [, iSubIndex])

Possible Values

oColl Array of button, input, select, and textArea objects.


oObject Reference to an individual item in the array of elements contained by the object.

vIndex Required. Integer or string that specifies the element or collection to retrieve. If this parameter is an integer, the method returns the element in the collection at the given position, where the first element has value 0, the second has 1, and so on. If this parameter is a string and there is more than one element with the name or id property equal to the string, the method returns a collection of matching elements.

iSubIndex Optional. Position of an element to retrieve. This parameter is used when vIndex is a string. The method uses the string to construct a collection of all elements that have a name or id property equal to the string, and then retrieves from this collection the element at the position specified by iSubIndex.


Property Description

length Sets or retrieves the number of objects in a collection.

Method Description

item Retrieves an object from the all collection or various other collections.

namedItem Retrieves an object or a collection from the specified collection.

tags Retrieves a collection of objects that have the specified HTML tag name.


urns Retrieves a collection of all objects to which a specified behavior is attached.

===========================================================================

INPUT type=radio Element | input type=radio Object (Internet Explorer)

Attribute Property Description

...

selected as a whole, indivisible unit.

CHECKED checked Sets or retrieves the state of the check box or radio button.

...

CONTENTEDITABLE contentEditable Sets or retrieves the string that indicates whether the user can edit the content of the object.

...


...

disabled Sets or retrieves the value that indicates whether the user can interact with the object.

DISABLED disabled Sets or retrieves the status of the object.

...

ID id Retrieves the string identifying the object.

isContentEditable Retrieves the value indicating whether the user can edit the contents of the object.

isDisabled Retrieves the value indicating whether the user can interact with the object.

isMultiLine Retrieves the value indicating whether the content of the object contains one or more lines.

isTextEdit Retrieves whether a TextRange object can be created using the object.

....

NAME name Sets or retrieves the name of the object.

nextSibling Retrieves a reference to the next child of the parent for the object.

...

Method Description

addBehavior Attaches a behavior to the element.


appendChild Appends an element as a child to the object.

applyElement Makes the element either a child or parent of another element.

attachEvent Binds the specified function to an event, so that the function gets called whenever the event fires on the object.

blur Causes the element to lose focus and fires the onblur event.

clearAttributes Removes all attributes and values from the object.

click Simulates a click by causing the onclick event to fire.


cloneNode Copies a reference to the object from the document hierarchy.


componentFromPoint Returns the component located at the specified coordinates via certain events.


contains Checks whether the given element is contained within the object.


detachEvent Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires.

dragDrop Initiates a drag event.

fireEvent Fires a specified event on the object.

focus Causes the element to receive the focus and executes the code specified by the onfocus event.


getAdjacentText Returns the adjacent text string.


getAttribute Retrieves the value of the specified attribute.


getAttributeNode Retrieves an attribute object referenced by the attribute.name property.

getBoundingClientRect Retrieves an object that specifies the bounds of a collection of TextRectangle objects.


getClientRects Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.


getExpression Retrieves the expression for the given property.


hasChildNodes Returns a value that indicates whether the object has children.


insertAdjacentElement Inserts an element at the specified location.

insertAdjacentHTML Inserts the given HTML text into the element at the location.

insertAdjacentText Inserts the given text into the element at the specified location.

insertBefore Inserts an element into the document hierarchy as a child node of a parent object.

mergeAttributes Copies all read/write attributes to the specified element.

normalize Merges adjacent TextNode objects to produce a normalized document object model.

releaseCapture Removes mouse capture from the object in the current document.

removeAttribute Removes the given attribute from the object.

removeAttributeNode Removes an attribute object from the object.

removeBehavior Detaches a behavior from the element.


removeChild Removes a child node from the object.

removeExpression Removes the expression from the specified property.


removeNode Removes the object from the document hierarchy.

replaceAdjacentText Replaces the text adjacent to the element.

replaceChild Replaces an existing child element with a new child element.

replaceNode Replaces the object with another element.

scrollIntoView Causes the object to scroll into view, aligning it either at the top or bottom of the window.


select Highlights the input area of a form element.


setActive Sets the object as active without setting focus to the object.

setAttribute Sets the value of the specified attribute.

setAttributeNode Sets an attribute object node as part of the object.

setCapture Sets the mouse capture to the object belonging to the current document.


setExpression Sets an expression for the specified object.


swapNode Exchanges the location of two objects in the document hierarchy.
×

Success!

Help @anishgiri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...