After the JavaScript control check box can only select two items, nothing else can be selected.

With the development of web applications, JavaScript has become one of the necessary knowledge for front-end engineers. Checkbox is one of the common web controls, and JavaScript can be used to control the interaction of checkboxes. This article will introduce how to use JavaScript to control the checkbox. After only two items can be selected, the remaining options cannot be selected.

1. HTML Basics

Before we use JavaScript to control check boxes, we first need to understand the basic syntax of check boxes in HTML. Check boxes in HTML are implemented using the tag. Setting the type attribute to "checkbox" creates a check box. For example:

<input type="checkbox" name="option1" value="1">

The above code will create a checkbox named "option1" with a value of 1. Through the name attribute, we can find this check box in the subsequent JavaScript code, and through the value attribute, we can get or set the selected state of the check box.

2. JavaScript implementation

Now we start to explain how to use JavaScript to control the check box. The main idea is that when a checkbox is checked, the remaining unchecked checkboxes are disabled. We can use the addEventListener() method to add a click event to each check box, and then implement the above logic in the event callback function.

The following is the specific implementation code:

// 获取所有复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 选择次数计数器，初始化为0
var checkedCount = 0;

// 遍历所有复选框，为它们添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    if (this.checked) {
      // 如果当前复选框被选中，判断当前是否已选中两项
      if (checkedCount >= 2) {
        // 已选中两项，禁用其余未选中的复选框
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            checkboxes[j].disabled = true;
          }
        }
      } else {
        // 尚未选中两项，计数器+1
        checkedCount++;
      }
    } else {
      // 如果当前复选框被取消选中，计数器-1，检查是否需要解除禁用
      checkedCount--;
      if (checkedCount < 2) {
        for (var j = 0; j < checkboxes.length; j++) {
          checkboxes[j].disabled = false;
        }
      }
    }
  });
}

In the above code, we first use the document.querySelectorAll() method to obtain all check box elements, and define a counter checkedCount to record the selected The number of checkboxes. Then, iterate through all checkbox elements and add click events to them. In each click event callback function, we check whether the current checkbox is selected. If selected, determine whether the selected number is equal to 2. If it is less than 2, set the counter to 1, otherwise disable the remaining unchecked checkboxes. If the checkbox is unchecked, then count -1 and check if it needs to be unchecked.

3. Effect demonstration

We can test the effect of the above JavaScript code in an HTML page. Save the above code as a JavaScript file, such as checkbox.js, and then link this JavaScript file in the HTML page:

<script src="checkbox.js"></script>

Then add multiple checkboxes in the HTML page, for example:

<input type="checkbox" name="option1" value="1">选项1

选项2

选项3

选项4

选项5

Open this HTML page in the browser, we can see multiple check boxes. After two of the checkboxes are selected, the remaining checkboxes become unselectable.

4. Summary

JavaScript can easily control interactions in web applications, such as controlling the selection behavior of check boxes. The above implementation method is only one of the ideas, and it can actually be adjusted and optimized according to specific needs. I hope this article can help everyone understand the application and practice of JavaScript in web application development.

The above is the detailed content of After the JavaScript control check box can only select two items, nothing else can be selected.. For more information, please follow other related articles on the PHP Chinese website!