How to set default selections in the layui radio box

Setting the default selection of the radio box in Layui can be achieved by using the checked property of HTML to directly set the default selection. Dynamically set default selections with JavaScript and re-render the form using layui.form.render('radio'). This method not only improves the user experience, but also flexibly sets default values ​​based on back-end data, and is suitable for various dynamic scenarios.

Setting the default selection of radio boxes in Layui is a common requirement, especially in form development. So, how to implement this function gracefully? Let's take a deeper look.

As a front-end framework, Layui provides us with rich UI components, where radio boxes are an integral part of the form. Setting the default selection not only improves the user experience, but also simplifies user operations in certain scenarios. Next, I will share some practical methods and experiences.

The first thing to know is that Layui's radio box can be selected by default through checked property. Let's start with the most basic usage:

 <div class="layui-form-item">
  <div class="layui-input-block">
    <input type="radio" name="sex" value="male" title="male" checked>
    <input type="radio" name="sex" value="female" title="female">
  </div>
</div>

In this example, the checked property is added to the first radio box so that it will be selected when the page is loading. However, setting default values ​​by HTML attributes alone may not be flexible enough in some dynamic scenarios.

In actual development, we often need to dynamically set the default selection based on the data returned by the backend. At this time, the power of JavaScript is revealed. Suppose we get a user's gender information from the backend and want to set the default selection based on this information, we can do this:

 // Assume that the user gender information obtained from the backend var userSex = 'male';

// Use Layui's form module layui.use('form', function(){
  var form = layui.form;

  // Get all radio boxes var radios = document.getElementsByName('sex');

  // traverse the radio box, find the match and set it to select for (var i = 0; i < radios.length; i ) {
    if (radios[i].value === userSex) {
      radios[i].checked = true;
      break;
    }
  }

  // Re-render form form.render(&#39;radio&#39;);
});

This code not only shows how to dynamically set the default selection, but also emphasizes the importance of Layui form rendering. The line of form.render('radio') is the key, it re-renders all radio boxes to ensure that the user can see the latest status.

However, when using this method, there are several things to note:

1. Performance considerations : If there are a large number of radio boxes, the traversal operation may affect performance. In this case, it is possible to consider using more efficient selectors or data structures for optimization.
2. User Experience : Ensure that the default selection settings do not interfere with the user's selection, especially if the user has made the selection before loading the data.
3. Compatibility : Different browsers may handle checked attributes differently to ensure that your code works properly in various environments.

In a real project, I have encountered an interesting case: In a complex form, different radio box groups need to set default values ​​according to different criteria. To solve this problem, I used a general function to handle the default value settings for all radio boxes:

 function setDefaultRadio(name, value) {
  var radios = document.getElementsByName(name);
  for (var i = 0; i < radios.length; i ) {
    if (radios[i].value === value) {
      radios[i].checked = true;
      break;
    }
  }
  layui.form.render(&#39;radio&#39;);
}

// Use example setDefaultRadio(&#39;sex&#39;, &#39;male&#39;);
setDefaultRadio(&#39;education&#39;, &#39;undergraduate&#39;);

This approach not only improves code reusability, but also makes maintenance easier.

In general, the default selection setting of the Layui radio box seems simple, but there are many factors that need to be considered in actual applications. By combining HTML and JavaScript, we can flexibly deal with a variety of scenarios. Hopefully these experiences and methods will help you use Layui's radio boxes more efficiently in your project.

The above is the detailed content of How to set default selections in the layui radio box. For more information, please follow other related articles on the PHP Chinese website!