Re: How to uncheck one checkbox if some other is checked

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;
    }
}
[download]

And it is called like this:

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

Comment on Re: How to uncheck one checkbox if some other is checked Select or Download Code

Replies are listed 'Best First'.
Re^2: How to uncheck one checkbox if some other is checked by Anonymous Monk on Aug 09, 2012 at 21:19 UTC
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'); }` [download]	[reply] [d/l]
Re^3: How to uncheck one checkbox if some other is checked by SerZKO (Beadle) on Aug 10, 2012 at 05:53 UTC
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	[reply]
Re^4: How to uncheck one checkbox if some other is checked by Anonymous Monk on Aug 10, 2012 at 06:46 UTC
That would be something like this, then. `my %checked = map { $_ => 1 } $qry->param("GRU$Za"); if (keys %checked > 1) { delete $checked{'E'}; } elsif (keys %checked == 0) { %checked = ('E' => 1); }` [download] I'd still document it in the UI; it sounds like behaviour that is likely to cause confusion.	[reply] [d/l]
Re^2: How to uncheck one checkbox if some other is checked by SerZKO (Beadle) on Aug 10, 2012 at 08:10 UTC
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` [download] 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;} ', }, ); [download] 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()")));` [download] 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	[reply] [d/l] [select]
Re^3: How to uncheck one checkbox if some other is checked by Anonymous Monk on Aug 10, 2012 at 09:31 UTC
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)	[reply]