JavaScript | JQuery 9

[html | JavaScript] 파일 업로드 버튼만들기 / 파일 정보 가져오기

게시글이 도움이 되었다면 게시글의 광고 클릭, [로그인]이 필요 없는 ❤ 눌러주세요:) 파일을 업로드 하는 코드가 필요했습니다. [HTML 코드] * BootStrap 기반 html 코드입니다. Add File File Name 태그를 이용하면, 파일을 업로드 할 수 있는 창을 띄울 수 있습니다. 하지만, input type은 버튼이 아닙니다. 그래서 버튼을 만들어서 그 버튼을 누르면 파일을 업로드 할 수 있게 구현하는것이 일반적입니다. 저는 'Add File' 이라는 버튼이 보이도록 만들고 그 버튼을 눌렀을 때, 파일 첨부가 가능한 창이 열리도록 코드를 짰습니다. 참고로, 단 한개의 파일만 업로드 가능하게 짜고 싶어 multiple 속성(드래그나, 여러 파일 선택을 통해 한번에 여러개의 파일 업로드)은..

JavaScript | JQuery 2023.05.26

[JQuery] Checkbox에서 체크된 값 가져오기 | checkbox value 구하는법

게시글이 도움이 되었다면 [로그인]이 필요 없는 ❤ 클릭과 게시글의 광고를 클릭 해 주세요:) input checkbox 에서 체크된 값 console창에 띄우는 법 $('input:checkbox[name={설정한 체크박스의 name}]').each(function () { if($(this).is(":checked")==true){ console.log($(this).val()); } }) } 활용 예시 Table checkbox에서 선택한 값들 가지고오기 [HTML코드] 선택 이름 가격 사과 3,000 바나나 2,000 오렌지 1,500 제출 [JQuery 코드] function alert(){ $('input:checkbox[name=checkedFruit]').each(function () { ..

JavaScript | JQuery 2023.02.08

[Html / JavaScript] Radio Button 라디오버튼 생성 / 기본으로 체크되어있게 하기 / 값에 따라 체크표시 하기

라디오 버튼 라디오버튼은 같은 name 속성을 갖는 요소들끼리는 한가지만 선택 할 수있도록 하는 버튼입니다. 예를들어, 성별에서 남 / 여 체크버튼은 라디오버튼을 많이 사용합니다. 남성 혹은 여성 둘중에 한가지만 선택 할 수있도록 하기 위해서 입니다. 라디오버튼 기본 구문 여성 남성 type = "radio"를 해주어야 라디오버튼을 사용할 수 있습니다. name = "설정하고 싶은 이름" : 되도록이면 식별이 될 수 있는 이름을 사용하는게 코드 구성에 있어 좋습니다. value = "설정값" 나중에 해당 체크된 라디오버튼에 값을 부여하고 싶다면 value를 이용해서 설정해주면 됩니다. 라디오버튼을 이용하여 여성/남성 선택지 만들기 라디오버튼에서 여러개의 항목중 한가지만 선택이 가능하도록 하기 위해서는 n..

JavaScript | JQuery 2022.12.19

[JQuery/JavaScript] 체크된 라인 삭제하기

체크된 라인 삭제하는 코드 function delLine(){ var checked = $('input:checkbox[name=checkbox]:checked'); for (var i = checked.length-1; i>-1;i--){ checked.eq(i).closest('tr').remove() } } 코드 해석 체크박스의 이름은 'checkbox'로 지었기 때문에 name = {내가 설정한 이름}을 입력하면 된다. 체크된 라인을 가져오는 부분 var checked = $('input:checkbox[name=checkbox]:checked'); for 반복문을 통해서 가장 마지막에 추가된 라인부터 체크되었는지 여부와 삭제를 진행한다. for (var i = checked.length - 1;..

JavaScript | JQuery 2022.12.12

[JavaScript] 웹개발 확인/취소 버튼 구현하기 (feat. confirm)

구현하고자 하는 내용 다음페이지로 이동을 위한 버튼 클릭 시, [다음페이지로 이동 하시겠습니까?] 라는 문구와 확인 / 취소 버튼이 있는 알림창을 띄우기. 버튼 클릭 : 다음 페이지로 이동 버튼 클릭 : 현재 페이지에 잔류 구현 코드 다음 . . . //다음 버튼 클릭시 작동하는 함수 function next() { //취소 버튼 클릭시, 페이지에 잔류하도록 설정 if (!confirm("다음페이지로 이동 하시겠습니까?")){ return; } location.href ="{이동하고자 하는 페이지의 url}" } 구현된 페이지 : 버튼 클릭 시, 일어나는 이벤트 JavaScript 의 confirm 확인과 취소 두 버튼을 가지고 있으며, 메세지를 지정할 수 있는 모달 창을 띄웁니다. alert 메서드는 ..

JavaScript | JQuery 2022.11.30

[JavaScript / JQuery] radio 버튼 체크 한 값 가져오기

게시글이 도움이 되었다면 [로그인]이 필요 없는 ❤ 클릭과 게시글의 광고를 클릭 해 주세요:) 라디오 버튼 체크박스와 다르게 중복선택이 불가능한, 여러개의 선택지중에 한가지만 선택 할 수 있도록 하는 선택박스 JavaScript | document.querySelector를 이용해서 라디오박스의 선택 된 값을 가져오는 코드 document.querySelector('input[type=radio][name={라디오버튼의 name}]:checked').value; JQuery를 이용해서 라디오박스의 선택 된 값을 가져오는 코드 $("input:radio[name='{라디오버튼Name}']:checked").val(); 특정 버튼을 눌렀을때, 라디오버튼에 선택된 값을 Ajax 통신 POST로 값을 넘겨주는 ..

JavaScript | JQuery 2022.11.19

[JavaScript] Enter click event | 검색 창 엔터시 버튼 클릭하게 하기 (event.keyCode 대체)

var input = document.getElementById("searchName"); input.addEventListener("keypress", function(event) { if (event.key === "Enter") { event.preventDefault(); document.getElementById("searchBtn").click(); } }); "searchName" 과 "searchBtn"을 본인이 정한 요소의 아이디에 맞게 가지고 오면 됩니다. ​ 저는 검색창 input태그의 id가 searchName, 검색하기 버튼의 id가 searchBtn 입니다. 게시글이 도움이 되었다면 [로그인]이 필요 없는 ❤ 눌러주세요:)

JavaScript | JQuery 2022.10.20

[JavaScript/JQuery] input 값 비우기 | 검색 결과 없을 시, 알림창 띄우고 input 값 비워주기

전체 코드 function discardContent(response) { if (response.data.length == 0 ){ alert($("#search").val() + "에 대한 검색결과가 없습니다."); $("#search").val(''); return ; } discardContent 라는 이름의 함수에 response를 담겠다.(함수 정의) response는 Ajax통신으로 DB에서 값을 가지고 온 뒤 넘겨준 파라미터이다. function discardContent(response) { "response의 데이터의 길이가 없을 때"를 감지한다. 여기서, 데이터의 길이가 없다는 것은 검색 한 결과 값이 없다는 것과 같은 의미이다. (해당 검색어에 대한 결과 출력물이 아무것도 없다. 즉..

JavaScript | JQuery 2022.10.14