[HTML5] checkbox-form part for multiple selection

Checkboxes are form parts for selecting multiple items. Specify "type =" checkbox "" in the input tag.

Menu Yakiniku Ramen Fresh salad 100%orange juice

<b> Menu </b>
<input type = "checkbox" name = "food" value = "1"> Yakiniku
<input type = "checkbox" name = "food" value = "2"> Ramen
<input type = "checkbox" name = "food" value = "3"> Fresh salad
<input type = "checkbox" name = "food" value = "4"> 100%orange juice

You can select the item. Since it is a form part, it is common to give it a name with the name attribute. Note that the checkbox does not include the label part of the item, only the selection part is the checkbox.

Specify the value you want to send to the server in the value attribute.

Checkboxes look similar to radio buttons, except that you can select multiple checkboxes.

Checkbox is an inline block element

Checkboxes are inline block elements by default. Since it is an inline block element, it flows to the left.

Menu Yakiniku Ramen Fresh salad 100%orange juice

  <b> Menu </b>
  <input type = "checkbox" name = "food" value = "1"> Yakiniku
  <input type = "checkbox" name = "food" value = "2"> Ramen
  <input type = "checkbox" name = "food" value = "3"> Fresh salad
  <input type = "checkbox" name = "food" value = "4"> 100%orange juice

Check the checkbox in advance

If you want to check the check box in advance, specify "checked =" checked "".

Menu Yakiniku Ramen Fresh salad 100%orange juice

<b> Menu </b>
<input type = "checkbox" name = "food" value = "1" checked = "checked"> Yakiniku
<input type = "checkbox" name = "food" value = "2"> Ramen
<input type = "checkbox" name = "food" value = "3"> Fresh salad
<input type = "checkbox" name = "food" value = "4"> 100%orange juice

Focus when clicking the label of each item in the checkbox

Use the label tag to focus when you click the label in the heading of each item in the checkbox, not just the checkbox itself. Specify the name specified in the id attribute in the input tag in the for attribute of the label tag.

Menu Yakiniku ramen fresh salad 100%orange juice

<b> Menu </b>
<input type = "checkbox" name = "food" id = "food1" value = "1"> <label for = "food1"> Yakiniku </label>
<input type = "checkbox" name = "food" id = "food2" value = "2"> <label for = "food2"> ramen </label>
<input type = "checkbox" name = "food" id = "food3" value = "3"> <label for = "food3"> fresh salad </label>
<input type = "checkbox" name = "food" id = "food4" value = "4"> <label for = "food4"> 100%orange juice </label>

Try clicking on each menu label. The corresponding checkbox is focused and selected.

Get the form checkbox value with jQuery when submitting the form

This is a sample using jQuery that gets the value of the check box when the submit button is pressed. It is often used when sending a POST request with ajax. The acquired contents are displayed by alert.

How to get all the values in a form

How to get all the values in a form.

<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
  $(function () {
    $(document) .on ('click','.form-text-field-all .submit_button', function () {
      
      / * How to get all the values in a form * /
      var data = $(this) .closest ('form') .serialize ();
      
      alert (data);
    });
  });
</script>

<div class = "form-text-field-all">
  <form>
    <b> Menu </b>
    <input type = "checkbox" name = "food" value = "1"> Yakiniku
    <input type = "checkbox" name = "food" value = "2"> Ramen
    <input type = "checkbox" name = "food" value = "3"> Fresh salad
    <input type = "checkbox" name = "food" value = "4"> 100%orange juice
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

The reason for starting on ('click') from document is to support dynamic HTML rewriting. If you follow from the top of the document, it will work correctly even if the HTML part is dynamically rewritten. If you specify "type =" button "" for button, you can eliminate the behavior of submitting the button of the form.

How to get the value of the specified checkbox

How to get the value of the specified checkbox. I'm getting only the menu. In the check, there is a possibility that multiple checks are made, so they are saved in an array.

<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
  $(function () {
    $(document) .on ('click','.form-text-field-part .submit_button', function () {
      / * Get menu * /
      var foods = [];
      $(this) .closest ('form') .find ('[name = food]: checked'). each(function () {
        var food = $(this) .val ();
        foods.push(food);
      });
      
      alert (JSON.stringify (foods));
    });
  });
</script>

<div class = "form-text-field-part">
  <form>
    <b> Menu </b>
    <input type = "checkbox" name = "food" value = "1"> Yakiniku
    <input type = "checkbox" name = "food" value = "2"> Ramen
    <input type = "checkbox" name = "food" value = "3"> Fresh salad
    <input type = "checkbox" name = "food" value = "4"> 100%orange juice
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

Make the checkbox an original design

Checkboxes are easy to use with a mouse click, but I find it a little difficult to use on a smartphone.

Let's make the check box an original design. I will explain how to do it.

1. Label the checkbox

2. Hide the checkbox

3. Use sibling selector to detect check

Below is a sample that makes the checkbox an original design. A check mark is added to the checked item. I'm using a checkmark image. It doesn't look like a checkbox, but it works as a checkbox.

Menu

Yakiniku
Ramen
fresh salad
100%orange juice

<style>
  / * Hide checkbox * /
  .original_checkbox input [type = checkbox] {
    display: none;
  }
  
  / * Label * / which is a sibling of the selected checkbox
  .original_checkbox input [type = checkbox]: checked + label {
    background: url (/images/checkbox/check.png) no-repeat;
    background-size: 15px;
    background-position: 15px 14px;
  }
  .original_checkbox {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
  .original_checkbox li {
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .original_checkbox li: first-child {
    border-radius: 5px 5px 0 0;
  }
  .original_checkbox li: last-child {
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #ddd;
  }
  .original_checkbox label {
    display: block;
    width: 100%;
    padding: 10px 0px 10px 40px;
    cursor: pointer;
  }
</style>

<b> Menu </b>
<ul class = "original_checkbox">
  <li>
    <input type = "checkbox" name = "food" id = "original_food1" value = "1"> <label for = "original_food1"> Yakiniku </label>
  </li>
  <li>
    <input type = "checkbox" name = "food" id = "original_food2" value = "2"> <label for = "original_food2"> Ramen </label>
  </li>
  <li>
    <input type = "checkbox" name = "food" id = "original_food3" value = "3"> <label for = "original_food3"> fresh salad </label>
  </li>
  <li>
    <input type = "checkbox" name = "food" id = "original_food4" value = "4"> <label for = "original_food4"> 100%orange juice </label>
  </li>
</ul>

HTML・CSS Writing 2022