I want to click on a list item and have all the checkboxes within that list item to be checked, and unchecked if I click on another list item - acting as a radio system. How can I do this? Here's my current code:

```js
jQuery(function($) {

});
```

```css
.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>
```