라디오 버튼, 다중 선택 상자, 텍스트 상자 및 기타 Operations_javascript 기술에 대한 일반적인 jquery 작업 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

라디오 버튼, 다중 선택 상자, 텍스트 상자 및 기타 Operations_javascript 기술에 대한 일반적인 jquery 작업 요약

May 16, 2016 pm 05:04 PM

jquery 라디오 버튼 체크박스 텍스트 상자

1. 텍스트 상자, 라디오 버튼, 체크 상자, 관련 연산

코드 복사 코드는 다음과 같습니다.

var sex=$("input[name='sex']:checked").val() //선택된 라디오 세트 가져오기 items
의 값 var item=$("#sel option:selected").text(); //select에서 선택한 항목의 텍스트를 가져옵니다
var option_num=$('#sel'). val(); // 프로젝트 선택 인덱스 가져오기
$ ("#SEL") [0] .selectEdindex = 1 // 선택 드롭다운 상자의 두 번째 요소는 현재 선택 값입니다.
$ ("input [name = 'sexx sex ']").get(1).checked=true; //라디오 라디오 선택 그룹의 두 번째 요소는 현재 선택된 값입니다

또는 라디오 버튼에 대한 기본 선택을 설정합니다.
$("input[name='sex']").each(function(){
> $(이것) .attr("checked", true); 🎜>

Jquery는 값 값에 따라 드롭다운 목록(선택)에서 기본 선택 항목을 설정합니다

코드 복사

코드는 다음과 같습니다. <select name=sel onchange="bao(this.options[this.options.selectedIndex] .value)"> <옵션 값="">선택하세요 <옵션 값 ="1">항목 1

<옵션 값="2">항목 2

 <option value="3">항목 3
 </select>
 &lt ;script>
 함수 바오
 {
 txt.value=s ;
 //선택 후 첫 번째 항목을 선택하여 Change가 발생하도록 합니다.
 document .all.sel.options[0].selected=true;
 }
 </ script>
 <textarea id=txt></textarea>


 

2. jQuery는 Select에서 선택한 텍스트와 값을 가져옵니다

코드 복사

코드는 다음과 같습니다. 구문 설명: $("# select_id").change(function(){//code...}); //Select 이벤트 추가, 그 중 하나가 선택되면 항목 선택 시 트리거 var checkText=$("#select_id" ).find("option:selected").text(); //Select로 선택한 텍스트 가져오기

var checkValue=$("#select_id") .val(); //Select로 선택한 값 가져오기

var checkIndex=$("#select_id ").get(0).selectedIndex; //Select로 선택한 인덱스 값 가져오기
var maxIndex=$(" #select_id option:last").attr("index "); //Select의 최대 인덱스 값을 구합니다

jQuery는 Select로 선택한 텍스트와 값을 설정합니다.

구문 설명: $("#select_id ").get(0).selectedIndex=1; //Select를 설정합니다. index 값 1의 항목 선택

$("#select_id ").val(4) //Select 값을 4로 설정하여 항목 선택 $("#select_id option[text=' jQuery']" ).attr("selected", true); //Select의 Text 값을 선택한 jQuery 항목으로 설정

jQuery는 Select의 Option 항목을 추가/제거합니다:

구문 설명:

$("#select_id").append("<option value='Value'>Text&lt ; /option>"); //Select

에 옵션(드롭다운 항목) 추가 $("#select_id").prepend("<option value='0'>선택하세요</option> ") ; //Select에 대한 옵션 삽입(첫 번째 위치) $("#select_id option:last").remove(); //Select에 인덱스 값이 가장 큰 옵션(마지막 항목) 제거
$( "#select_id option[index='0']").remove(); //Select에서 인덱스 값이 0인 옵션(첫 번째) 삭제 $("#select_id option[value= '3'] ").remove(); //Select에서 Value='3'인 옵션
삭제 $("#select_id option[text='4']").remove(); //텍스트 삭제 ='4'옵션 선택

신청:

코드 복사 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http -equiv= "X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery common</title>
<meta name="description" content=" ">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src=" jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/ /드롭다운 목록 초기화--동적 추가
var item = ['유치원','초등학교','중학교','고등학교','대학교','대학원생',' 박사','석사'];
var html ="<option value='0'>선택하세요</option>";
for (var i = 0;i < item.length; i ){
html = " <옵션 값='" (i 1) "'>" 항목[i] "</option>";
>
이벤트 추가 중 항목이 선택됨 function showIt(){

var selectText = $("#grade option:selected").text();//선택된 텍스트 가져오기 by Select
/ /var selectText = $("#grade").find("option:selected").text();//이 방법도 가능합니다
var selectValue = $("#grade" ).val(); //선택한 값 가져오기
var selectIndex = $("#grade").get(0).selectedIndex//select의 인덱스 값 가져오기
var text = 'Select:' selectText "n";
text ='값:' selectValue "n";
text ='색인 값:' selectIndex;
$("#text").text(text);
}
&lt ;/script>
</head>
<body>
<div>
<이름 선택='학년' id='학년' onchange=" showIt()"&gt ;</select>
; <p><textarea name='text' id='text' row='30' col='100'></textarea>&lt ;/p>
</div>
</body>
</html>