function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ArunaAruna 

Selecting Single check box on VF Page

Hi All,

 

Happy New Year ,

 

I have a requirement; under page block table I am displaying all the contacts with the check box.

 

But the problem is I need to allow user to select only one check box.

 

I think this need to be done using JavaScript function, can anyone have help me by sending sample code.

 

Thank you.

MattLacey.ax1065MattLacey.ax1065

Would it be possible to use a radio button group instead? That would save you some effort!

 

Otherwise, you could give all of the checkboxes a class, then use jQuery's class selector (jQuery(".className")) to find the elements and set their value to false. Do this in a javascript function, and call that from the onClick event of each checkbox to clear them all, before settin gthe current box to checked.
ArunaAruna

Hi 

 

Thank you for the replay.

Could you please send me if you have sample code.
hisrinuhisrinu

You can also acheive this with html code, here is sample snippet (which might not be perfect but which will help you to get started the code)

 

<apex:column >
<apex:outputpanel >
<input type="radio" name="prodgroup"/>
<apex:actionSupport event="onclick" action="{!method}" rerender="pageBlock">
 <apex:param name="selected" value="{!p.Id}"/>
</apex:actionSupport>
</apex:outputpanel>
</apex:column>

 
MattLacey.ax1065MattLacey.ax1065

Presuming you've already included jQuery in your page from a static resource you'll want to do something like this:

 

<script type="text/javascript">
  jQuery.noConflict();

  function ClearAll()
  {
    jQuery(".myCheckboxClass").each(function()
    {
      jQuery(this).attr("checked",false);
    });
  }

</script>

 And then do your inputCheckboxes something like:

 

<apex:inputCheckbox value="{!MyMergeField}" onClick="ClearAll();jQuery(this).attr('checked',true);" styleClass="myCheckboxClass"/>

 

This code may not be 100% correct as I've typed it straight into the browser, but you can see how it'll work and it should start of you off down the right path.
Navatar_DbSupNavatar_DbSup

Hi,

 

You can use the below code snippets for reference

 

---------- Vf page --------------

<apex:page id="page1" controller="clsSearchContact">
<apex:form >
<script>
var flag=0;
var SelectConId1='';
function checkAll(cb)
{    
    flag=0;
    SelectConId1='';
    var inputElem = document.getElementsByTagName("input");
    for(var i=1; i<inputElem.length; i++)
    {
        if(inputElem[i].id.indexOf("checkedone")!=-1)
        {
            inputElem[i].checked = cb.checked;
            flag=flag+1;
            SelectConId1=SelectConId1+inputElem[i].name+',';
        }
    }
    if(cb.checked!=true)
    {
        SelectConId1="";
        flag=0;
    } 
    alert(SelectConId1);
  
}

function checkone(cb,conid)
{
  
  
   var inputElem = document.getElementsByTagName("input");
    for(var i=1; i<inputElem.length; i++)
    {
        if(inputElem[i].id.indexOf("checkedone")!=-1)
        {
            if(inputElem[i].name!=cb.name)
            {
                inputElem[i].checked=false;
            }
        }
    }
  
  
}

function search_element()
{
    //alert('hello');
    var element=document.getElementById("searchtext").value;
   // alert(element);
    searchelement(element);
    return false;
}
function addtolist()
{
   
    if((SelectConId1.length)<=1)
    {
        alert('Please select atleast one contact');
        return false;
    }
    else
    {
        addtolistcontact();
    }
}

function addtolistcontact()
{
   
      
    
}










function closethis()
{
   
}
</script>


    <apex:pageblock tabstyle="account">
     <apex:pageBlockSection title="Select Multiple Contact"   collapsible="false" columns="1">
     <Apex:pageBlock >
            
            <apex:pageBlockButtons location="both" >
            <apex:outputLabel >&nbsp;</apex:outputLabel>
                <apex:commandButton onclick="return addtolist();" value="Add to List"/>
                <Apex:commandButton value="Done"  onclick="return closethis()"/>
            </apex:pageBlockButtons>
            <apex:outputPanel >
                <input type="text" id="searchtext"/>
                <apex:actionFunction immediate="true"  action="{!searchcontact}" reRender="pbtable" name="searchelement">
                    <apex:param name="assignserach" value="" assignTo="{!searchfiled}"/>
                </apex:actionFunction>
                <apex:commandButton value="search" onclick="return search_element();" />
            </apex:outputPanel>
            <apex:pageBlockTable value="{!getconlist}" var="cc" id="pbtable">
                <apex:column >
                    <apex:facet name="header"> 
                        <input type="checkbox" id="main" onclick="return checkAll(this)"  /> 
                        
                    </apex:facet>
                     <input type="checkbox" name="{!cc.id}" id="checkedone"  onclick="return checkone(this,'{!cc.id}')"  /> 
                    </apex:column>
                <div id="{!cc.id}">
                <apex:column >
                    <apex:facet name="header" >Name</apex:facet>
                    {!cc.name}
                        </apex:column>
                <apex:column >
                    <apex:facet name="header" >Title</apex:facet>
                    {!cc.Title}
                </apex:column>

                  <apex:column >
                     <apex:facet name="header" >Phone</apex:facet>
                    {!cc.phone}
                </apex:column>
                  <apex:column >
                    <apex:facet name="header" >Email</apex:facet>
                    {!cc.email}
                </apex:column>

                <apex:column >
                    <apex:facet name="header" >Account/Company</apex:facet>
                    {!cc.account.name}
                </apex:column>
                
                <apex:column >
                    <apex:facet name="header" >Owner</apex:facet>
                    {!cc.owner.name}
                </apex:column>
                </div>
            </apex:pageBlockTable>
      
        
       </Apex:pageBlock>
       </apex:pageBlockSection>
    </apex:pageblock>
    </apex:form>
</apex:page>


---------- Apex Controller ------------

public class clsSearchContact
{
public string searchfiled{get;set;}
public list<contact> getconlist{get;set;}

public clsSearchContact()
{
    getconlist =new list<contact>();
    getconlist=database.query('Select name,phone,email,account.name,title,owner.name from contact limit 10');
}

public void searchcontact()
    {
         try
         {
         system.debug('@@@@@@@@searchfiled'+searchfiled);
         
           searchfiled= '%'+searchfiled+ '%';
             getconlist =new list<contact>();
             getconlist=database.query('Select name,phone,email,account.name,title,owner.name from contact  WHERE Name like :searchfiled limit 100');
           
         }
         catch(Exception e)
         {
             system.debug('Error'+e);
         }
    }
}

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.