Beefy Boxes and Bandwidth Generously Provided by pair Networks
Clear questions and runnable code
get the best and fastest answer
 
PerlMonks  

How to uncheck one checkbox if some other is checked

by SerZKO (Beadle)
on Aug 09, 2012 at 18:21 UTC ( [id://986575]=perlquestion: print w/replies, xml ) Need Help??

SerZKO has asked for the wisdom of the Perl Monks concerning the following question:

Hej Monks !

I have a chekcbox group with 4 checkboxes and one which is default checked. print Tr(td(checkbox_group("GRU$Za",['P', 'F', 'K', 'Ej'],'Ej')));

How can I make "Ej" unchecked when some other box is checked ? CGI.pm documentation says that I can use onClick argument with JavaScript, but I don't know nothing about JavaScript, so any help/pointing to right place is appreciated, just please don't expect from me to learn JavaScript just for this purpose.

Thanks in advance !

Replies are listed 'Best First'.
Re: Hpw to uncheck one checkbox if some other is checked
by Anonymous Monk on Aug 09, 2012 at 18:23 UTC

    If you want only one option selected at a time, use radio buttons rather than checkboxes

      No, I would like to have possibility to have more then one checked at the same time. But not "Ej" one in case one or more others are checked.

        SerZKO:

        When one is checked, disable the incompatible ones in your on-click handler. When it's unchecked, re-enable them.

        ...roboticus

        When your only tool is a hammer, all problems look like your thumb.

Re: How to uncheck one checkbox if some other is checked
by Anonymous Monk on Aug 09, 2012 at 20:50 UTC

    This is a question more suitable for a javascript group. And I would still urge you to drop those CGI helpers and write raw HTML. Then you would fit into a web developer group and get (hopefully) good help from there.

    Aaanyway, if you are willing to ignore the cosmetic aspects, you would be better off doing this in your submission code (you need to prioritise the "E" checkbox over the others.) You will need to deal with it in the submission code anyway. There might be other checkboxes checked even if the "E" one is already checked.

    Anyway, the javascript-osmosis person that I am, here seems to be a workable function. I honestly don't know if it is in any way cross-browser compatible or anything.

    function toggleOther (elName, ignore) { var buttons = document.getElementsByName(elName); var disable = false; if (ignore.checked) { disable = true; } for (var i = 0; i < buttons.length; i++) { if (buttons[i] == ignore) { next; } buttons[i].disabled = disable; } }

    And it is called like this:

    <input type="checkbox" name="GRU$Za" value="E" onclick="toggleOther('G +RU$Za', this)" />

      I guess I skimmed your question a bit too fast, as I noticed you were asking for radiobutton-like behaviour. That is somewhat more difficult to implement, but my function's button-disabling behaviour might suffice.

      Indeed, as the monk below me said, for immediate feedback, you need JS. It, however, would not hurt to just say somewhere on the UI that the "E" button, if checked, overrides the others; you will need to just implement it in code then.

      # If 'E' box is checked, then ignore the others my @checked = $qry->param("GRU$Za"); if (grep { $_ eq 'E' } @checked) { @checked = ('E'); }
        Hej Anonimous monk and thanks for your reply,

        That's an excellent idea to check it on submission. The thing is that if neither of "P", "F" or "K" is checked then "Ej" should be checked and vice versa - if any(or more) of "P", "F" or "K" are checked then "Ej" must not be checked.

        Anyhow, thanks for pointing to that direction

      Hej Anonimous monk(s),

      I listened to your advices and found a way to get it done with a lot of help from web of course (it showed then if you search in english you get a lot more hits then when you're searching in swedish ;-) ). It ended up with a code like this :

      my $JCHECK=<<END; function CheckBoxes() { if((document.getElementById("P").checked == true) || (document.get +ElementById("F").checked == true) || (document.getElementById("K").ch +ecked == true)) { document.getElementById("Ej").checked = false;} else {document.getElementById("Ej").checked = true;} } END
      I changed then header to this
      print $qry->start_html(-title => "L\xE4gg till", -lang => 'sv', -bgcolor => "#336699", -script => $JCHECK, #ADDED -style => { -code => ' body,p,b,i,em,dt,li,div,th,td,Tr,u,optio +n,form,dd,dl,sl { font-family: Arial, sans-serif; font-size: 12px; color: #FFFFFF; } a {font-family: Arial, sans-serif; font- +size: 14px; color: #FFFFFF;} h1 {font-family: Arial, sans-serif; font +-size: 30px; color: #FFFFFF;} h2 {font-family: Arial, sans-serif; font +-size: 18px; color: #FFFFFF;} h3 {font-family: Arial, sans-serif; font +-size: 18px; color: #FFFFFF;} ', }, );
      And checkboxes are not now checkbox_group (which was very convinient to write), but independant checkboxes. Like this :
      print $qry->table ({ Border => 1, Cellpadding => 3, bordercolor =>"#FF +FFFF"}, Tr( td(checkbox(-name => 'P', -id =>'P', -value=> 'Pri', -onClick => + "CheckBoxes()")), td(checkbox(-name => 'F', -id =>'F', -value=> 'For', -onClick => + "CheckBoxes()")), td(checkbox(-name => 'K', -id =>'K', -value=> 'Kap', -onClick => + "CheckBoxes()")), td(checkbox(-name => 'Ej',-id =>'Ej', -value=> 'Ej', -checked => + 'checked', -onClick => "CheckBoxes()")));
      and it seems to be working, but only for the first row, så I have to add some iteration somehow but I hope to find it somewhere on the web.

      Might be usefull to someone

        As I mentioned, somewhat more difficult to implement; and I would suggest to drop your approach and settle for something simpler as it will stay that messy.

        The JS function and server-side code I provided are probably good enough, when used together.

        (The easiest algorithm, code-wise, would probably be "mark Ej checkbox somehow, set onclick handlers for all checkboxes to call function that clears other checkboxes if Ej is checked" ... I bet it can be done with no more than a few lines' change to my function, but my javascript-fu is not up for the task today)

Re: How to uncheck one checkbox if some other is checked
by Anonymous Monk on Aug 09, 2012 at 20:56 UTC
    Any "immediate response" of the user-interface on the client side, such as the one you are describing, must be done in JavaScript. Hate to be the one to say that you must learn JavaScript "just for this purpose" but ... somebody had to say it.
      Hej Anonimous monk and thanks for your reply,

      And thanks for being honest.

Re: How to uncheck one checkbox if some other is checked
by aaron_baugher (Curate) on Aug 10, 2012 at 11:15 UTC

    This is really a question for JavascriptMonks, but I'll chime in to say jQuery makes fiddling with things like checkboxes a lot easier, and you don't have to plug those ugly onClick things into your HTML:

    <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery +.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input.g[name!="loner"]').click(function(e){ $('input.g[name="loner"]').prop('checked',false); }); $('input.g[name="loner"]').click(function(e){ $('input.g[name!="loner"]').prop('checked',false); }); }); </script> </head> <body> <form> <input type=checkbox name=loner class=g />Loner <input type=checkbox name=a class=g />A <input type=checkbox name=b class=g />B <input type=checkbox name=c class=g />C <input type=checkbox name=d class=g />D </form> </body>

    Aaron B.
    Available for small or large Perl jobs; see my home node.

      Hej Aaron and thanks for your reply,

      Your solution seems to be solution for all my problems and I 'll for sure try to implement it first thing in the morning, although I'm not sure that I'm going to succeed:-)

      Anyhow thanks for your time and effort!!

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: perlquestion [id://986575]
Approved by chacham
help
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others drinking their drinks and smoking their pipes about the Monastery: (5)
As of 2024-03-19 03:34 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found