0

Now my goal is to show an alert if all of my checkboxes are checked. Now I tried researching about it but all I can see is if the checkbox is in <input type="checkbox"> instead of <apex:inputCheckbox>. So how Can i call the <apex:inputCheckbox> in the javascript function?

I tried this but it does not work

    <script>
function checker(){
if(document.getElementbyID('cb1').value==true && document.getElementbyID('cb2').value==true){
                    alert('You can only click one field to lock');
                }
            }
}
</script>

closed as off-topic by Adrian Larson, Sebastian Kessel, Vigneshwaran G, Boris Bachovski, Vamsi Krishna Oct 19 '16 at 23:59

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to Salesforce are off-topic here, but can be asked on Stack Overflow." – Adrian Larson, Sebastian Kessel, Vigneshwaran G, Boris Bachovski, Vamsi Krishna
If this question can be reworded to fit the rules in the help center, please edit the question.

  • This question does not really appear to be specific to Salesforce and belongs on Stack Overflow instead of SFSE. – Adrian Larson Oct 19 '16 at 15:37
  • Also, if you want to enforce only one selection, <apex:selectRadio> seems a much more appropriate tag... – Adrian Larson Oct 19 '16 at 15:38
  • @AdrianLarson It would be, except you can't place the radio anywhere you like (e.g. inside each row in a dataTable). If we could place them as we needed, it'd be a lot more useful. Unless you know of a way to do that? – sfdcfox Oct 19 '16 at 16:04
  • I've never needed to use it, personally. Just seemed like an obvious choice. I didn't know of those limitations. – Adrian Larson Oct 19 '16 at 16:08
2

The "id" attribute is a magic value that's kind of hard to rely on. These days, I usually prefer to set a custom data attribute to key off of. Here's a simple way to do this:

<apex:page >
    <apex:form>
        <script>
            function check() {
                if(document.querySelectorAll('[data-single]:checked').length===2) {
                    alert('choose only 1');
                }
            }
        </script>
        <apex:inputCheckbox html-data-single="" onchange="check()" />
        <apex:inputCheckbox html-data-single="" onchange="check()" />
    </apex:form>
</apex:page>

Feel free to adjust as necessary.

1

Visualforce provides components that are expanded into blocks of HTML on the server and the resulting HTML page is passed to the browser. So as soon as you add JavaScript logic that runs in the browser, you have to start relying on the details of this conversion.

For example, id values that you set in Visualforce have the id values of the parent elements prefixed. You can use your browser's "Inspect" or "View Source" features to see what ends up in the page and develop your JavaScipt accordingly.

But it is safest to start out doing validation in your Apex controller which is how Visualforce is designed to be used. Only move to JavaScript if you have a good reason.

Not the answer you're looking for? Browse other questions tagged or ask your own question.