function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rick MacGuiganRick MacGuigan 

Javascript function call with checkbox inputField onclick


I would like to simmply call a javascript function (setOtherBox) that is triggered by checkbox1 and sets checkbox2 as selected. I'm using the inputField within a PageBlockSection. Can't seem to get this to update the second checkbox. Would appreciate any help and prefer to do this using the standardcontroller.

<apex:page doctype="HTML-5.0" standardController="Audit__c">

<script>
        function setOtherBox(input, textid) {
            if(input.checked) {
                document.getElementById(textid)..checked=true;
            }
            else {
                 document.getElementById(textid)..checked=false;
            }
        }
    </script>

<apex:variable var="audit" value="{!Audit__c}" />  
<apex:form id="form1">
<apex:pageBlock id="block1" title="Audit Sample Selection">
<apex:outputPanel id="ajaxrequest">
........
<apex:pageBlockSection columns="14" id="section2" title="My Sections"  >

<table id="t01" style="width:100%">
 <tr>
    <th><apex:inputField id="check1" value="{!audit.Policy_Information__c}" onclick="setOtherBox(this, '{!$Component.check2}')" />  </th>     
    
    <th><apex:inputField id="check2" value="{!audit.Driver_Information__c}"/> </th>      
   
</tr>

</table>

</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
 

Best Answer chosen by Rick MacGuigan
Ravikant Saini 1Ravikant Saini 1
Hi Rick,
             i think you just use this. 
             document.getElementById(textid).checked=true; at the place of document.getElementById(textid)..checked=true;

or you can use class of checkbox.  onclick first checkbox call checkAll(this); and class of other checkbox is sel.
function checkAll(ele) {
	     var checkboxes = document.getElementsByClassName('sel');
	     if (ele.checked) {
	         for (var i = 0; i < checkboxes.length; i++) {
	             if (checkboxes[i].type == 'checkbox') {
	                 checkboxes[i].checked = true;
	             }
	         }
	     } else {
	         for (var i = 0; i < checkboxes.length; i++) {
	             if (checkboxes[i].type == 'checkbox') {
	                 checkboxes[i].checked = false;
	             }
	         }
	     }
	 }




All Answers

Ravikant Saini 1Ravikant Saini 1
Hi Rick,
             i think you just use this. 
             document.getElementById(textid).checked=true; at the place of document.getElementById(textid)..checked=true;

or you can use class of checkbox.  onclick first checkbox call checkAll(this); and class of other checkbox is sel.
function checkAll(ele) {
	     var checkboxes = document.getElementsByClassName('sel');
	     if (ele.checked) {
	         for (var i = 0; i < checkboxes.length; i++) {
	             if (checkboxes[i].type == 'checkbox') {
	                 checkboxes[i].checked = true;
	             }
	         }
	     } else {
	         for (var i = 0; i < checkboxes.length; i++) {
	             if (checkboxes[i].type == 'checkbox') {
	                 checkboxes[i].checked = false;
	             }
	         }
	     }
	 }




This was selected as the best answer
Akshay DeshmukhAkshay Deshmukh
Hi Rick,
Just use the following.
when passing to Javascript function use this:
onclick="setOtherBox('check1,check2 )" (Id of the input field) && Id of the field which you want to change

in function :
function setOtherBox(id, idToselect) {
  
var field =  document.getElementById(' $Component.block1:id ' );        
if( field.value == 'true') { 
             document.getElementById(' $Component.block1:idToselect ' ).value= true;
            }
            else {
                 document.getElementById(' $Component.block1:idToselect ' ).value= false;
            }
        }
Rick MacGuiganRick MacGuigan

 Ravikant Saini 1 I like the use of class. How do I set theh class name on an APEX component attribute ? I don't see class as one of the attributes associated with the inputfield .  

Thanks. I see where I had double (..) notation in the javascript.
Rick MacGuiganRick MacGuigan
When I try to set the class as an attribut on the inputField class I get en error : Error: Unsupported attribute class in <apex:inputField>
   
<td>    <apex:inputField class="sel" id="check2" value="{!audit.Prior_Carrier__c}" label="Prior Carrier" />  </td>
Rick MacGuiganRick MacGuigan
Ravikant Saini 1  - I overlooked StyleClass on the apex component thinking it was just for CSS use bu looks like the DOM uses it as well. Thanks for the suggestions especially with the class name. For an arrray of checkbox fields in a table this will reduce the lines of code required for just setting several checkboxes based on multiple controlling checkboxes using the standardcontroller.  

     <td>    <apex:inputField id="check2" styleClass="sel" value="{!audit.Prior_Carrier__c}" label="Prior Carrier" />  </td>
    <td>    <apex:inputField styleClass="sel" value="{!audit.Age__c}"/>    </td>
    <td>    <apex:inputField styleClass="selx" value="{!audit.Model_Year__c}"/>    </td>