jquery determines whether compatriots are selected

In daily development, we may encounter situations where we need to determine whether sibling elements are selected. For example, when implementing the single-select or multi-select function of a list, we need to make corresponding processing based on the selection of the same group of elements.

In this case, jQuery provides some convenient methods to determine the selected status of sibling elements. Next, we introduce these methods and their applications.

1. Selected state

In jQuery, we can use the prop() method to obtain the selected state of an element. This method returns a Boolean value indicating whether the element is selected. For example:

var isChecked = $('#checkbox').prop('checked');

The above code will get the selected status of the element with the id checkbox, and save the result in the isChecked variable.

If we want to get the selected status of all elements in a group of elements, we can use the following code:

var isCheckedArray = $('.checkbox').map(function () {
  return $(this).prop('checked');
});

The above code will get the selected status of all elements with class checkbox Check the state and save the result in the isCheckedArray array.

2. Determine whether sibling elements are selected

With the method of obtaining the selected status, we can easily determine whether sibling elements are selected. Among them, jQuery provides two commonly used methods: siblings() and next().

1. siblings()

siblings() method is used to get all sibling elements of the current element. For example:

var siblings = $('#checkbox').siblings();

The above code will get all the sibling elements of the element with the id checkbox, and save the result in the siblings variable. If we want to determine whether sibling elements are selected, we can use the each() method after the siblings() method to traverse the sibling elements and determine their selected status in turn, as follows:

$('#checkbox').siblings().each(function () {
  if ($(this).prop('checked')) {
    // 同胞元素已选中
  } else {
    // 同胞元素未选中
  }
});

The above code will traverse all the sibling elements of the element with the ID checkbox and determine their selected status respectively.

2. next()

next() method is used to get the next sibling element of the current element. For example:

var nextElement = $('#checkbox').next();

The above code will get the next sibling element of the element with the id checkbox, and save the result in the nextElement variable. If we want to determine whether the next sibling element is selected, we can use the prop() method to obtain its selected status, as follows:

if ($('#checkbox').next().prop('checked')) {
  // 下一个同胞元素已选中
} else {
  // 下一个同胞元素未选中
}

The above code will determine that the id is checkbox## The selected state of the next sibling element of the # element.

3. Application scenarios

So, how can we apply the above method in actual development? The following are several common application scenarios:

Implementing multiple selections in lists

In lists, we often need to implement the function of multiple selections. For example, on the product selection page, users can check multiple products for settlement. At this point, we need to determine whether each product is selected to complete the processing of the selected products.

The key to implementing this function is to obtain the checkbox elements in front of each product and determine whether they are selected. The specific implementation code is as follows:

<ul>
  <li>
    <input type="checkbox" name="product" value="1">
    商品1
  </li>
  <li>
    <input type="checkbox" name="product" value="2">
    商品2
  </li>
  <li>
    <input type="checkbox" name="product" value="3">
    商品3
  </li>
</ul>

$('input[name="product"]').click(function () {
  var isChecked = $(this).prop('checked');
  var value = $(this).val();

  if (isChecked) {
    // 商品选中
    console.log('商品' + value + '已选中');
  } else {
    // 商品取消选中
    console.log('商品' + value + '已取消选中');
  }
});

The above code will monitor the click events of all checkbox elements with the

name attribute being product on the page, and determine the response time each time it is clicked. Check the selected state of the marquee and print the corresponding information.

Implement exclusive radio selection

In some scenarios, we need to implement exclusive radio selection for a group of elements, that is, when one element is selected, other elements are not selected. state. For example, on a payment method selection page, users can only choose one payment method. At this time, we can use the following code to implement the exclusive radio selection function:

<ul>
  <li>
    <label><input type="radio" name="payment" value="alipay"> 支付宝</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="wechat"> 微信支付</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="unionpay"> 银联支付</label>
  </li>
</ul>

$('input[name="payment"]').click(function () {
  $('input[name="payment"]').prop('checked', false); // 取消其他选项的选中状态
  $(this).prop('checked', true); // 当前选项设为选中
});

The above code will monitor all radio button elements in the page that have the

name attribute of payment Click event, uncheck other options every time you click, and set the current option to the selected state.

Summary

In jQuery, we can use the

prop() method to get the selected status of an element, and the siblings() method to get the element’s For all sibling elements, use the next() method to get the next sibling element of the element. These methods can help us determine the selected status of sibling elements and implement a variety of practical functions.

The above is the detailed content of jquery determines whether compatriots are selected. For more information, please follow other related articles on the PHP Chinese website!