I have three kind of separate checkbox questions, all related to their use in the same datagrid.

1. I've loaded a datatable, `dtAll`, into a datagrid, `dgdList`,  and bound each column to the imported data.  The datagrid also has an initial column with checkboxes.  How can I determine which rows of data have been checked.  The intended functionality is for a user to mark two duplicates and merge together.  I need to be able to gather row data from the datatable or datagrid whenever the checkbox column is checked

2. When I group my datagrid into tables, below, it somehow turns off my ability to check more than one checkbox. Everytime i select a new row, it clears all previous checkboxes.  I would like to be able to check boxes in multiple rows.  (Further, I have to click twice, once to select the row, once to edit the value of the checkbox to true - it would be great if I could do it in a single click).

    

        Dim myView As System.ComponentModel.ICollectionView
        myView = CollectionViewSource.GetDefaultView(dtAll)
        myView.GroupDescriptions.Add(New PropertyGroupDescription("GROUP ID"))
        dgdList.ItemsSource = dtAll.DefaultView

3. I've added a checkbox to the group header.  When clicked, I'd like it to fill in each checkbox in all the rows inside of that group.  Is there any way I can do this as well?  If it helps, below is the Xaml code I'm using to split up groups of records

    

         <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Path=Name}" />
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}" x:Name="Style1">
                        <Setter Property="Template" x:Name="Setter1">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}" x:Name="ControlTemplate1">
                                    <Expander IsExpanded="True" Name="Expander1">
                                        <Expander.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <CheckBox Name="CheckBox9" />
                                                <TextBlock Text=" Exact Name Match Group #"/>
                                                <TextBlock Text="{Binding Path=Name}" />           
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>

Using checkboxes in a grouped vb.net datagrid

As @brian already said, Radio buttons seem like a more organic way to achieve this result, but you still could do this with checkboxes if you wanted

Handle the `CheckBox.CheckedChanged` event with the same sub for all four checkboxes



    Private Sub CheckBox1_CheckedChanged(sender As System.Object, e As System.EventArgs) _
        Handles CheckBox1.CheckedChanged, CheckBox2.CheckedChanged, CheckBox3.CheckedChanged, CheckBox4.CheckedChanged
        'cast sender
        Dim senderCheck As CheckBox = DirectCast(sender, CheckBox)

        'loop through all checkboxes
        For Each checkbox In {CheckBox1, CheckBox2, CheckBox3, CheckBox4}

            'only apply changes to non-sender  boxes
            If checkbox IsNot senderCheck Then

                'set property to opposite of sender so you can renable when unchecked
                checkbox.Enabled = Not senderCheck.Checked
            End If
        Next
    End Sub

If I have 4 different CheckBoxes and when the user selects one of them I want the other 3 to become disabled so you can't click on a checkbox while another one is already checked how would I go about doing this? I have this, but it doesnt work right now and I thought it would:

        If NoDelayCheckMarkBox.Checked = True Then
            timeBetweenIterationDelay = 0
            SecondDelayCheckMarkBox.Enabled = False
            HalfSecondDelayCheckMarkBox.Enabled = False
            FiftyMSDelayCheckMarkBox.Enabled = False


I can still click as many check boxes as I want too. Thank you for any help.

Disabling CheckBoxes

### HTML

For the **HTML** part, there are [**two ways to specify a label for an element**][1]:

1. Setting the label's [**`for`**][label-for] attribute to the element's id

    ```html
    <input type='checkbox' id='chkCart' />
    <label for='chkCart'>Add to Cart</label>
    ```

2. Placing the element inside a label

    ```html
    <label >
        <input type='checkbox' />
        Add to Cart
    </label>
    ```

I'll use the first one

### JavaScript

Then you can use **jQuery** to handle the rest:
  
* First, make sure the DOM is loaded by wrapping your javascript in a [**`.ready`**][ready] function (since we'll be looking to modify these elements).
* Then attach an event handler to the checkbox click event by using the [**`.click`**][click] function. 
* Since we've set the `for` attribute for this particular label, we can use the [**`attribute`**][attribute] equals selector (`[name="value"]`) by looking for a label with the same `for` value as our calling element's `id`.
* You can check if the object that raised the event is checked on or off by using the [**`:checked`**][isChecked] selector.
* You can use the Javascript's [**`ternary`**][ternary] operator to conditionally set each value
* Then rename the label using the [**`.text`**][text] function

It should all look like this:

```js
$(function () {
    $("#chkCart").click(function () {
        var lbl = $(`label[for='${this.id}']`);
        var msg = this.checked ? "Added" : "Add to Cart"
        lbl.text(msg);
    });
});
```


### Demo in Stack Snippets & [jsFiddle][fiddle]





    $(function () {
        $("#chkCart").click(function () {
            var lbl = $(`label[for='${this.id}']`);
            var msg = this.checked ? "Added" : "Add to Cart"
            lbl.text(msg);
        });
    });



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <input type='checkbox' id='chkCart'/>
    <label for='chkCart'>Add to Cart</label>



[1]: https://stackoverflow.com/a/18432439/1366033
[label-for]: http://www.w3schools.com/tags/att_label_for.asp

[ready]: http://api.jquery.com/ready/
[click]: http://api.jquery.com/click/
[isChecked]: http://api.jquery.com/checked-selector/
[ternary]: http://msdn.microsoft.com/en-us/library/ie/be21c7hw(v=vs.94).aspx
[attribute]: http://api.jquery.com/attribute-equals-selector/
[text]: http://api.jquery.com/text/
[fiddle]: http://jsfiddle.net/KyleMit/4cWgN/


Currently I'm just using jQuery to have a checkbox and a text, with the text to change after the checkbox is ticked, but I'm trying to work it so that the box OR text can be clicked and the result is changed text and checked box? 

Can anybody assist me further?

![enter image description here][1]


  [1]: http://i.stack.imgur.com/vK8U7.jpg

Trying to have a link + checkbox, both clickable and text change on click

You can use a [**Split Button Dropdown**][Split Button Dropdown] to style it.

Then replace the main button text with `<input type="checkbox"/>`

Here's an example:



    <div class="btn-group">
      <div type="button" class="btn btn-default">
          <input type="checkbox" class="splitButtonInput"/>
      </div>

      <button type="button" class="btn btn-default dropdown-toggle" 
              data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>


Handling clicks is up to you and your business rules

### [Demo in jsFiddle][jsfiddle]

**Screenshot**:

[![screenshot][screenshot]][jsfiddle-demo]

----

### Update:

To address the line height issue, just open up your developer tools and see what's making it off center.  In this case, it's a default margin that bootstrap applies to all checkboxes; kill it by adding another rule like this:



    .splitButtonInput[type="checkbox"] {
        margin: 0;
    }

Since bootstrap styles things to *look* like buttons with the set of [`btn` classes][button], you can use any element you want around the input element.  If you're worried about validation, in this case, you can [change the `button` element to a `div`][button children].


[Split Button Dropdown]: http://getbootstrap.com/components/#btn-dropdowns-split

[button]: http://getbootstrap.com/css/#buttons

[jsfiddle]: http://jsfiddle.net/KyleMit/p59Fq/
[jsfiddle-demo]: http://jsfiddle.net/KyleMit/p59Fq/show

[screenshot]: http://i.imgur.com/HC448k4.png

[button children]: https://stackoverflow.com/q/15885444/1366033

Can anybody please tell me how to create a dropdown checkbox? 

It should be able to separately select/unselect the check box and also click the toggle to call the menu.

Here's an example from gmail:

![screenshot][screenshot]


  [screenshot]: http://i.imgur.com/Ud5ltv3.png

How to create a drop down checkbox control?

### Here's what we'll build:

[![Demo][1]][1]

### HTML

Essentially, we'll look to combine two different sets of Bootstrap controls & styles: [Dropdowns][2] & [Checkboxes][3]. Inside of each `li`, we'll use a `label` instead of an `a` element, so that we can [wrap the checkbox in a label][4] and make the entire row clickable.



    <ul class="dropdown-menu checkbox-menu allow-focus">
      <li >
        <label>
          <input type="checkbox"> Cheese
        </label>
      </li>
    </ul>

### CSS

We can steal some of the styles normally applied to `.dropdown-menu li a`, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues.  Additionally, we'll add styles for `.active` and `:hover`.




    .checkbox-menu li label {
        display: block;
        padding: 3px 10px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
        margin:0;
        transition: background-color .4s ease;
    }
    .checkbox-menu li input {
        margin: 0px 5px;
        top: 2px;
        position: relative;
    }

    .checkbox-menu li.active label {
        background-color: #cbcbff;
        font-weight:bold;
    }

    .checkbox-menu li label:hover,
    .checkbox-menu li label:focus {
        background-color: #f5f5f5;
    }

    .checkbox-menu li.active label:hover,
    .checkbox-menu li.active label:focus {
        background-color: #b8b8ff;
    }


### JavaScript

Some other housekeeping, we'll manually keep an `.active` class flag on each list item  to correspond to whether or not the item is checked so we can style it appropriately.



    $(".checkbox-menu").on("change", "input[type='checkbox']", function() {
       $(this).closest("li").toggleClass("active", this.checked);
    });

We'll also want to allow multiple selections by allowing the menu to [stay open on internal click events][5] by stopping the event from bubbling up



    $(document).on('click', '.allow-focus', function (e) {
      e.stopPropagation();
    });

### Demo in Stack Snippets 





    $(".checkbox-menu").on("change", "input[type='checkbox']", function() {
       $(this).closest("li").toggleClass("active", this.checked);
    });

    $(document).on('click', '.allow-focus', function (e) {
      e.stopPropagation();
    });



    body {
      padding: 15px;
    }

    .checkbox-menu li label {
        display: block;
        padding: 3px 10px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
        margin:0;
        transition: background-color .4s ease;
    }
    .checkbox-menu li input {
        margin: 0px 5px;
        top: 2px;
        position: relative;
    }

    .checkbox-menu li.active label {
        background-color: #cbcbff;
        font-weight:bold;
    }

    .checkbox-menu li label:hover,
    .checkbox-menu li label:focus {
        background-color: #f5f5f5;
    }

    .checkbox-menu li.active label:hover,
    .checkbox-menu li.active label:focus {
        background-color: #b8b8ff;
    }





    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>



    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" 
              id="dropdownMenu1" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="true">
        <i class="glyphicon glyphicon-cog"></i>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
      
        <li >
          <label>
            <input type="checkbox"> Cheese
          </label>
        </li>
        
        <li >
          <label>
            <input type="checkbox"> Pepperoni
          </label>
        </li>
        
        <li >
          <label>
            <input type="checkbox"> Peppers
          </label>
        </li>
        
      </ul>
    </div>




  [1]: https://i.stack.imgur.com/6Qt53.gif
  [2]: https://getbootstrap.com/docs/3.3/components/#dropdowns
  [3]: https://getbootstrap.com/docs/3.3/css/#checkboxes-and-radios
  [4]: https://stackoverflow.com/a/18432439/1366033
  [5]: https://stackoverflow.com/a/50414665/1366033

I'm trying to put a checkbox form in a dropdown like this: 

    <ul>
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
          Dropdown Form<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><label class="checkbox"><input type="checkbox">Two</label></li>
          <li><label class="checkbox"><input type="checkbox">Two</label></li>
        </ul>
      </li>
    </ul>


### Here is a [Demo in Bootply][1]


However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.

[1]: https://www.bootply.com/jVzNlXSVGI