jquery에서 다중 선택 상자의 값을 얻는 방법(방법에 대한 간략한 분석)

프런트 엔드 개발에서는 처리를 위해 체크박스의 값을 얻거나 선택 여부를 확인해야 하는 경우가 많습니다. jQuery는 다중 선택 상자의 값을 쉽게 얻을 수 있는 풍부한 API를 제공하는 매우 인기 있는 JavaScript 라이브러리입니다. 이 기사에서는 jQuery를 사용하여 다중 선택 상자를 얻는 방법을 소개합니다.

1. 선택된 다중 선택 상자의 상태

다중 선택 상자의 값을 얻기 전에 먼저 다중 선택 상자의 상태, 즉 선택 여부를 이해해야 합니다. .prop() 메서드를 사용하여 다중 선택 상자의 선택 상태를 가져오거나 설정할 수 있습니다. 예는 다음과 같습니다.

<input type="checkbox" id="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

// 获取checkbox1的选中状态
const isChecked = $('#checkbox1').prop('checked');
console.log(isChecked); // 输出true

위 예의 출력 결과는 true이며 다중 선택 상자가 선택되었음을 나타냅니다. 다중 선택 상자의 selected 속성을 unchecked로 변경하면 출력 결과는 false가 됩니다.

2. 다중 선택 상자의 값을 가져옵니다

다중 선택 상자의 값을 가져와야 하는 경우 다음 방법을 사용할 수 있습니다.

1. 다중 선택 상자

jQuery를 사용할 수 있습니다.each() 메서드는 선택된 모든 다중 선택 상자를 탐색하고 해당 값 속성을 얻은 다음 이 값을 배열에 저장합니다. 예는 다음과 같습니다.

<input type="checkbox" id="option1" value="value1" checked>
<label for="option1">选项1</label>

<input type="checkbox" id="option2" value="value2" checked>
<label for="option2">选项2</label>

<input type="checkbox" id="option3" value="value3">
<label for="option3">选项3</label>

// 获取所有选中的多选框的值，并存储到数组中
const selectedOptions = [];
$('input[type=checkbox]:checked').each(function() {
  selectedOptions.push($(this).val());
});
console.log(selectedOptions); // 输出["value1", "value2"]

위 코드는 선택기를 사용하여 선택된 모든 확인란을 선택합니다. .each() 메서드를 사용하여 선택된 각 다중 선택 상자를 탐색하고 이러한 다중 선택 상자의 값 속성을 배열에 추가합니다.

2. .serializeArray() 메서드를 사용하여 선택한 다중 선택 상자의 값을 가져옵니다.

.each() 메서드를 사용하는 것 외에도 jQuery의 .serializeArray() 메서드를 사용하여 값을 가져올 수도 있습니다. 선택한 다중 선택 상자. 이 메소드는 선택된 모든 체크박스의 값을 포함하는 배열을 반환합니다. 예는 다음과 같습니다.

<input type="checkbox" id="choice-1" name="choice" value="1" checked>
<label for="choice-1">选项1</label>

<input type="checkbox" id="choice-2" name="choice" value="2" checked>
<label for="choice-2">选项2</label>

<input type="checkbox" id="choice-3" name="choice" value="3">
<label for="choice-3">选项3</label>

// 获取选中的多选框的值
const selectedValues = $('input[name="choice"]:checked').serializeArray();
console.log(selectedValues); // 输出[{name: "choice", value: "1"}, {name: "choice", value: "2"}]

위 코드는 선택기를 사용하여 선택된 모든 확인란을 선택합니다. 여기서는 .name 속성을 사용하여 다중 선택 상자를 선택하고 .serializeArray() 메서드를 사용하여 선택된 다중 선택 상자의 값을 가져옵니다.

3. 결론

위의 소개를 통해 jQuery를 사용하여 다중 선택 상자의 값을 얻는 방법을 알 수 있습니다. .each() 메서드를 사용하든 .serializeArray() 메서드를 사용하든 다중 선택 상자의 값을 잘 처리할 수 있습니다. 그러나 이를 사용할 때는 자신의 비즈니스 로직을 더 잘 구현하기 위해 실제 상황에 따라 선택해야 합니다.

위 내용은 jquery에서 다중 선택 상자의 값을 얻는 방법(방법에 대한 간략한 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!