상품검색부분 체크박스로 검색 문의 입니다. 채택완료
당근이좋니
5년 전
조회 2,544
인터넷 검색하며 소스를 발견하고 이리 저리 해보고 있는데요 ^^ 쉽지가 않네요
우선 상품검색부분을 키워드로 검색하는게 아니라 체크박스를 체크시 그에 맞는 상품이 노출되게 하는걸
만들어보려고 공부중인데요
</p>
<p><!DOCTYPE html></p>
<p><html></p>
<p><head></p>
<p><meta charset="utf-8"></p>
<p><script type="text/javascript" src="<a href="<a href="http://code.jquery.com/jquery-1.11.0.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.11.0.js"></script</a>"><a href="http://code.jquery.com/jquery-1.11.0.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.11.0.js"></script</a></a>></p>
<p><script type="text/javascript"></p>
<p>/*</p>
<p>* 연결된 링크 저장하셔서 아래쪽에 적용하시면 됩니다.</p>
<p>*/</p>
<p>var linkList = [];</p>
<p>$(function() {</p>
<p> $("input:checkbox").click(function() {</p>
<p> var target = $(this).parent().parent();</p>
<p> var checkedList = [];</p>
<p> var checkedElement = target.find("input:checkbox:checked");</p>
<p> checkedElement.each(function() {</p>
<p> /*</p>
<p> * index 대신 value로 지정하려면 index()대신 val()로 하시면 됩니다.
*/</p>
<p> checkedList.push($(this).index());</p>
<p> });</p>
<p> /*</p>
<p> * 선택목록의 구분자를 임의로 지정하려면 toString 대신 join("구분자")를 사용하세요.</p>
<p> */</p>
<p> target.find(".select").text("").append(checkedList.toString())</p>
<p> /*</p>
<p> * 현재는 값이 없어지면 .html만 남게 됩니다. 수정해서 사용하세요.</p>
<p> */</p>
<p> .end().find(".link").text("").append("<a href='" + checkedList.join("") + ".html'>" + checkedList.join("") + ".html" + "</a>");</p>
<p> });</p>
<p> });</p>
<p> </script></p>
<p> </head></p>
<p> <body></p>
<p> <form></p>
<p> <div class="first"></p>
<p> <div>--첫번째 체크--</div></p>
<p> <div></p>
<p> <input type="checkbox" value="1">하나</p>
<p> <input type="checkbox" value="2">둘</p>
<p> <input type="checkbox" value="3">셋</p>
<p> <input type="checkbox" value="4">넷</p>
<p> <input type="checkbox" value="5">다섯</p>
<p> </div></p>
<p> <div></p>
<p> <span>선택목록 : </span><span class="select"></span>
</div></p>
<p> <div></p>
<p> <span>링크 : </span><span class="link"></span></p>
<p> </div></p>
<p> </div></p>
<p> <div class="second"></p>
<p> <div>--두번째 체크--</div></p>
<p> <div></p>
<p> <input type="checkbox" value="1">원</p>
<p> <input type="checkbox" value="2">투</p>
<p> <input type="checkbox" value="3">쓰리</p>
<p> <input type="checkbox" value="4">포</p>
<p> <input type="checkbox" value="5">파이브</p>
<p> </div></p>
<p> <div></p>
<p> <span>선택목록 : </span><span class="select"></span></p>
<p> </div></p>
<p> <div></p>
<p> <span>링크 : </span><span class="link"></span></p>
<p> </div></p>
<p> </div></p>
<p> <div class="third"></p>
<p> <div>--세번째 체크--</div></p>
<p> <div></p>
<p> <input type="checkbox" value="1">사과</p>
<p> <input type="checkbox" value="2">바나나</p>
<p> <input type="checkbox" value="3">딸기</p>
<p> <input type="checkbox" value="4">포도</p>
<p> <input type="checkbox" value="5">키위</p>
<p> </div></p>
<p> <div></p>
<p> <span>선택목록 : </span><span class="select"></span></p>
<p> </div></p>
<p> <div></p>
<p> <span>링크 : </span><span class="link"></span></p>
<p> </div></p>
<p> </div></p>
<p> </form></p>
<p> </body></p>
<p> </html></p>
<p>
이렇게 하면 링크를 클릭시에는 검색이 되는데요 링크클릭방식 말고 그냥 바로 체크하면 이벤트가 발생하고 체크된박스가 풀림현상이 없었으면 좋겠는데요 어디를 손봐야 하는걸까요 ㅠㅠ
몇일동안 봐도 도통 모르겠네요
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
5년 전
우선 실행화면을 보면 좋겠지만 이상태로라면 링크를 이동하면 채크가 플려서 문제시죠.
그럼 그값도 같이 넘겨서 그걸 다시 체크해주셔야합니다. GET뒤에 넘기서던지 jquery를 할수있다면
페이지가 안바뀌고 검색이 가능하게 할수도 있는데...
초보시라면 전체 소스를 만들어서 드리기는 어려울듯하고요...
페이지에 링크부분에 체크값을 같이 넘기시는게 편할듯도합니다.
jquery를 조금 사용가능하시면 jquery.form.js 라는것도 참고하시면
페이지 깜박임 없이 해상 페이지에서 유동적으로 여러가지 생성이나 값이동 후 값받기 등이 가능하니
공부하시면 될듯합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
당근이좋니
5년 전
감사합니다~^^ jquery를 공부해봐야 겠네요^^ 친절한 답변 너무 감사해요~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인