JQuery를 사용하여 다중 선택의 선택 값을 설정하는 방법

JQuery의 다중 선택 기능은 매우 일반적이며 선택한 값을 설정하는 것도 JQuery 다중 선택 작업의 일부입니다. JQuery를 사용하여 선택한 값을 설정하면 작업을 빠르게 구현하고 사용자 편의성을 향상시키며 다양하고 복잡한 기능 요구 사항을 지원할 수 있습니다.

이 기사에서는 JQuery를 사용하여 다중 선택의 선택 값을 설정하는 방법을 소개하고 예제를 사용하여 이해를 돕습니다.

1. JQuery 다중 선택의 기본 동작

선택된 값 설정을 소개하기 전에 JQuery 다중 선택의 기본 동작을 이해해야 합니다.

1. 선택된 값 가져오기

JQuery에서 다중 선택 상자의 선택된 값을 가져오는 것은 매우 간단하며 val() 메서드를 사용하면 빠르게 얻을 수 있습니다. 예:

var selectVal = $('input[type=checkbox]:checked').val();

위 코드는 체크박스 유형의 선택된 옵션을 선택한 다음 선택된 값을 가져와 selectVal 변수에 저장합니다.

2. 선택한 상태 설정

여러 옵션 중 선택한 상태를 설정해야 하는 경우 prop() 또는 attr() 메서드를 사용하면 됩니다. 예:

$('input[type=checkbox]').attr('checked', true);

위의 코드 줄은 확인란 유형의 모든 옵션을 선택됨으로 설정합니다.

3. 선택한 번호 가져오기

선택한 번호를 가져오는 방법도 매우 간단합니다. 선택한 항목 배열의 길이를 사용하면 됩니다. 예:

var count = $('input[type=checkbox]:checked').length;

2. 선택한 값 설정 방법

기본 멀티를 이해한 후 -select 조작, 다음으로 여러 옵션 중 선택된 값을 설정하는 방법을 소개하겠습니다.

1. 다중선택 선택값 설정

다중선택 선택값을 설정하려면 먼저 선택한 항목의 내용과 옵션값을 결정해야 합니다. 예:

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

위 코드에서 이름 속성이 color인 옵션은 다중 옵션이며, 각 항목의 해당 값은 각각 빨간색, 노란색, 파란색입니다.

JQuery를 통해 옵션의 확인됨 상태를 설정하는 방법도 매우 간단합니다. 해당 옵션의 확인됨 속성을 true로 설정하기만 하면 됩니다. 예:

$('input[name=color][value=red]').prop('checked', true);

위 코드는 이름 속성이 color이고 값이 빨간색인 옵션을 선택 상태로 설정합니다.

2. 다중 선택의 선택된 값 가져오기

다중 선택의 선택된 값을 얻으려면 전체 다중 선택 그룹 내에서 선택된 옵션을 필터링해야 하며, 이러한 옵션의 값 값을 결과로 사용하십시오. , 배열에 추가합니다. 예:

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

위 코드는 이름 속성이 color인 선택된 옵션을 순회하고 선택된 배열에 각 옵션의 값을 추가합니다.

3. 실제 사례

JQuery를 사용하여 여러 옵션의 선택된 값을 설정하는 가장 일반적인 시나리오는 양식 작업입니다. 다음은 모든 사람이 배운 지식을 더 잘 적용할 수 있도록 실제 사례입니다.

1. HTML 코드

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. 선택한 값을 설정하고 선택한 값을 가져옵니다

// 设置选中值
$("form input[name=hobby][value=run]").prop("checked", true);
$("form input[name=hobby][value=football]").prop("checked", true);

// 获取选中值
var hobbyArr = [];
$("form input[name=hobby]:checked").each(function(){
  hobbyArr.push($(this).val());
});
console.log(hobbyArr); // ["run", "football"]

위 코드는 name 속성을 취미, 실행할 값, 축구 옵션으로 각각 설정하고 선택한 모든 값을 출력에 저장합니다. 배열.

4. 요약

위는 JQuery에서 다중 선택 옵션의 선택 값을 설정하는 방법을 소개한 것입니다. 이 기사의 예제를 통해 독자는 JQuery 다중 선택의 기본 작업과 다중 옵션의 선택된 값을 설정하는 방법을 더 잘 이해할 수 있습니다. 뛰어난 JavaScript 프레임워크인 JQuery의 강력한 작업과 편리한 구문은 웹 개발을 더욱 효율적으로 만듭니다.

위 내용은 JQuery를 사용하여 다중 선택의 선택 값을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!