[HTML5] Radio button-Form part to select an item

Radio buttons are form parts for selecting items. Specify "type =" radio "" in the input tag. If you select one, the other selection will be canceled.

Price Less than 1000 yen From 1000 yen to 2000 yen From 2000 yen to 3000 yen 3000 yen or more

<b> Price </b>
<input type = "radio" name = "price" value = "1000"> Less than 1000 yen
<input type = "radio" name = "price" value = "2000"> From 1000 yen to 2000 yen
<input type = "radio" name = "price" value = "3000"> From 2000 yen to 3000 yen
<input type = "radio" name = "price" value = "99999999"> 3000 yen or more

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 radio button does not include the label part of the item, only the selection part is the radio button.

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

Radio buttons have the same purpose as select field (select), but if there are few items, make them radio buttons so that they can be seen from the beginning. Is also good.

Radio buttons are inline block elements

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

Price Less than 1000 yen From 1000 yen to 2000 yen From 2000 yen to 3000 yen 3000 yen or more

  <b> Price </b>
  <input type = "radio" name = "price" value = "1000"> Less than 1000 yen
  <input type = "radio" name = "price" value = "2000"> From 1000 yen to 2000 yen
  <input type = "radio" name = "price" value = "3000"> From 2000 yen to 3000 yen
  <input type = "radio" name = "price" value = "99999999"> 3000 yen or more

Check radio buttons in advance

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

Price Less than 1000 yen From 1000 yen to 2000 yen From 2000 yen to 3000 yen 3000 yen or more

<b> Price </b>
<input type = "radio" name = "price" value = "1000" checked = "checked"> Less than 1000 yen
<input type = "radio" name = "price" value = "2000"> From 1000 yen to 2000 yen
<input type = "radio" name = "price" value = "3000"> From 2000 yen to 3000 yen
<input type = "radio" name = "price" value = "99999999"> 3000 yen or more

Focus when clicking the label of each item of the radio button

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

Price less than 1000 yen From 1000 yen to 2000 yen From 2000 yen to 3000 yen 3000 yen or more

<b> Price </b>
<input type = "radio" name = "price" id = "price1" value = "1000"> <label for = "price1"> less than 1000 yen </label>
<input type = "radio" name = "price" id = "price2" value = "2000"> <label for = "price2"> From 1000 yen to 2000 yen </label>
<input type = "radio" name = "price" id = "price3" value = "3000"> <label for = "price3"> From 2000 yen to 3000 yen </label>
<input type = "radio" name = "price" id = "price4" value = "99999999"> <label for = "price4"> 3000 yen or more </label>

Try clicking on each price label. The corresponding radio button will be focused and selected.

Get the value of the form's radio button with jQuery when submitting the form

This is a sample using jQuery to get the value of the radio button 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> Price </b>
    <input type = "radio" name = "price" value = "1000"> Less than 1000 yen
    <input type = "radio" name = "price" value = "2000"> From 1000 yen to 2000 yen
    <input type = "radio" name = "price" value = "3000"> From 2000 yen to 3000 yen
    <input type = "radio" name = "price" value = "99999999"> 3000 yen or more
    <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 "type =" button "" is specified for button, behavior of submitting the button of the formCan be eliminated.

How to get the value of the specified radio button

How to get the value of the specified radio button. I'm only getting the price.

<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 price * /
      var price = $(this) .closest ('form'). find ('[name = price]: checked'). val ();
      
      alert (price);
    });
  });
</script>

<div class = "form-text-field-part">
  <form>
    <b> Price </b>
    <input type = "radio" name = "price" value = "1000"> Less than 1000 yen
    <input type = "radio" name = "price" value = "2000"> From 1000 yen to 2000 yen
    <input type = "radio" name = "price" value = "3000"> From 2000 yen to 3000 yen
    <input type = "radio" name = "price" value = "99999999"> 3000 yen or more
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

Make the radio button an original design

Radio buttons are easy to use with a mouse click, but on smartphones, they feel a little difficult to use.

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

1. Label the radio button

2. Hide the radio button

3. Use sibling selector to detect check

Below is a sample of how to make a radio button an original design. The checked items will be pink. It doesn't look like a radio button, but it works as a radio button.

Price

less than 1000 yen
From 1000 yen to 2000 yen
From 2000 yen to 3000 yen
3000 yen or more

<style>
  / * Hide radio buttons * /
  .original_radio input [type = radio] {
    display: none;
  }
  
  / * Label * / which is a sibling of the selected checkbox
  .original_radio input [type = radio]: checked + label {
    background: pink;
  }
  
  .original_radio {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
  .original_radio li {
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .original_radio li: first-child {
    border-radius: 5px 5px 0 0;
  }
  .original_radio li: last-child {
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #ddd;
  }
  .original_radio label {
    display: block;
    width: 100%;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>

<b> Price </b>
<ul class = "original_radio">
  <li>
    <input type = "radio" name = "price" id = "original_price1" value = "1000"> <label for = "original_price1"> less than 1000 yen </label>
  </li>
  <li>
    <input type = "radio" name = "price" id = "original_price2" value = "2000"> <label for = "original_price2"> From 1000 yen to 2000 yen </label>
  </li>
  <li>
    <input type = "radio" name = "price" id = "original_price3" value = "3000"> <label for = "original_price3"> From 2000 yen to 3000 yen </label>
  </li>
  <li>
    <input type = "radio" name = "price" id = "original_price4" value = "99999999"> <label for = "original_price4"> 3000 yen or more </label>
  </li>
</ul>

HTML・CSS Writing 2022