2

Please see this: http://gisdev.clemson.edu/fireflies

Toward the top right are three checkboxes and I am trying to make them work like radio buttons. Part of the programming is working but here is something which is problematic:

Initially, the 'Counties' checkbox is checked. And if I were to click on the 'Hydric Soil Rating' checkbox and then click back on the Counties checkbox the Hydric checkbox still stays checked. The console doesn't output anything, meaning the value of checkboxes_controls variable gets lost when the problem happens.

Here is relevant code:

var checkboxescontainer = document.querySelectorAll('.leaflet-control-layers-overlays');
var checkboxes_controls = checkboxescontainer[0].children;

$(checkboxes_controls).each(function() 
{
    console.log($.trim($(this).text()));
    if (eventtype === 'add') 
    {
        if (layername === $.trim($(this).text()))  
        {
            // don't do anything but uncheck all others--making them work like radio buttons
        }
        else 
        {
            $(this).find('input:checkbox').attr('checked', false);
        }
    }   
});

Any idea?

Edit I see the problem: Clicking on the Counties layer the second time to select that doesn't even fire the layer 'Add' event because I am merely sending the layers back and front. Hmmmm.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
IrfanClemson
  • 1,699
  • 6
  • 33
  • 52
  • What is `eventtype` and `layername` supposed to be? Please post your complete relevant code (including HTML) – Ejaz May 07 '14 at 17:18
  • I posted an 'edit'; please see that. My problem is that layers are not really being removed in the first place. Thanks. – IrfanClemson May 07 '14 at 17:21
  • Why don't you just use radio buttons? I would say using checkboxes as radio buttons is poor UI. – Lee Taylor May 07 '14 at 17:41
  • @Lee Taylor: I'd LOVE to use radio buttons but can't find anything in Leaflet.js api which would allow me to use radio buttons to work in my case. Thanks. – IrfanClemson May 07 '14 at 17:54
  • But your page already has radio buttons doesn't it? – Lee Taylor May 07 '14 at 18:06
  • Yes, it does--for the 'base' layer controls; and not for the 'overlay' controls. Anyway, I **just** updated that page with a slightly different approach: I actually did need the checkboxes to be mutually exclusive but, unlike radio buttons, all checkboxes needed to be de-selectable. The 'Answer' would have helped me except I can't use that in my page. – IrfanClemson May 07 '14 at 18:08
  • Possible duplicate of [jQuery: make checkboxes act like radio buttons?](http://stackoverflow.com/questions/4697941/jquery-make-checkboxes-act-like-radio-buttons) – T J May 23 '16 at 07:48
  • Working example of checkboxes used as radio buttons here: http://jsfiddle.net/54RCF/ – Korgrue Feb 10 '17 at 16:06

2 Answers2

6

The essential problem here is that you need to group a set of boxes and then if any one of the set is clicked, iterate through the set, unchecking all except the one that was clicked.

You can group using a class name. Then give each an id.

When the class is clicked, save the id of the clicked one. Then iterate through the checkboxes within the class and uncheck any that have a different id than the one you saved off.

<form action="">
    <input id="cbBike" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Bike" checked>I have a bike<br />
    <input id="cbCar" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Car">I have a car<br />
    <input id="cbBoth" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Both">I have both<br />
    <input id="cbNeither" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Neither">I have neither<br />
</form>


var selectedBox = null;

$(document).ready(function() {
    $(".CB2RBVehicles").click(function() {
        selectedBox = this.id;

        $(".CB2RBVehicles").each(function() {
            if ( this.id == selectedBox )
            {
                this.checked = true;
            }
            else
            {
                this.checked = false;
            };        
        });
    });    
});

Here's an example.

ChicagoJohnnyVegas
  • 148
  • 1
  • 1
  • 4
  • Thank you so much. I am sure your answer, like the above accepted Answer from chep263 would have worked. And actually so does my original code in the Question. The 'problem' in my Question was that I was not 'removing' layers from the map and was merely sending them back/forth. So checking/unchecking was not triggering a function in my code. My problem is fixed and can be seen in the page. Thanks again! – IrfanClemson May 07 '14 at 18:57
3

If you want checkboxes to act as radio buttons, attach onClick event listeners to all checkboxes, remove "checked" attributes and place it on the one being clicked.

checkboxes_controls = jQuery(document.querySelectorAll('.leaflet-control-layers-overlays input[type=checkbox]'))

jQuery(checkboxes_controls).click(function(){
    jQuery(checkboxes_controls).removeAttr('checked');
    jQuery(this).attr('checked', 'checked');
});
Uyghur Lives Matter
  • 18,820
  • 42
  • 108
  • 144
chepe263
  • 2,774
  • 22
  • 38
  • Your answer works! There was a minor edit needed and it is on the page now. Thanks a bunch! It is a different matter I still have the problem of layers not working properly but the checkboxes are now working like radio buttons. Thanks! – IrfanClemson May 07 '14 at 17:29