jQuery로 양식의 스타일을 다시 지정 하시겠습니까?

Question

나는이 스크립트를 설정하여 데이터베이스의 모든 관련 사용자를 옆에있는 확인란이있는 페이지로 표시합니다. 상자 중 일부를 선택하고 양식을 제출하여 데이터베이스에서이 사용자들로 그룹을 만들 수 있습니다. 이 모든 것이 훌륭하게 작동합니다.

불행히도 우리 디자이너는이 점을 좋아하지 않습니다. 그녀가 원하는 것은 기본적으로 화면 왼쪽의 여섯 개의 빈 필드 목록입니다. 그런 다음 화면 오른쪽의 사람 이름 옆에있는 더하기 단추를 클릭하면 해당 이름이 첫 번째 빈 필드에 나타납니다.

그래서이 모든 것을 다시 코딩하는 대신 (실제로는 옵션이 아닙니다) jQuery로 모든 것을 다시 스타일화할 수 있다고 생각합니다. 확인란을 선택하지 않으면 플러스로 표시되고 선택되어 있으면 마이너스로 표시되도록 스타일 상자의 스타일을 지정할 수 있습니다.

그런 다음 일종의 이벤트가 있어야만 확인란을 클릭하면 사람의 이름이 찍히고 첫 번째 빈 상자에 삽입됩니다. 그것은 단지 연기와 거울입니다. 빈 상자는 테두리가있는 div 일 수 있습니다. 기능적으로는 이전과 동일하게 작동합니다.

가능한지 누구든지 확인할 수 있습니까? 내 JS 지식은 짜증이 나는데 어디에서 시작해야할지 모르겠습니다. 게다가 난 이미 페이지에서 다음의 jQuery 검증 기능을 가지고 있고 나는 그것을 방해하는이 새로운 JS를 원하지 않는 : 내가 무엇을 요구하고있어에 체크 박스를 코딩하는 방법에 대한 조언을

$(document).ready(function(){ 
$("#myform").validate({ 
    debug: false, 
    rules: { 
     group: {required: true}, 
    }, 
    messages: { 
     group: {required: " Field required.", loginRegex: " Invalid character."}, 
    }, 
    submitHandler: function(form) { 
     $('input[type=submit]').attr('disabled', 'disabled'); 
     $('#results').html('Loading...'); 
     $.post('process_group.php', $("#myform").serialize(), function(data) { 
      $('#results').html(data); 
     }); 
    } 
    }); 
}); 

내 생각이다 그것이 체크되면 일부 div에 값을 삽입하십시오. 선택을 취소하면 해당 값을 제거합니다. 내가 제대로 이해하면

Answer 1

, 당신은 JQuery와 함께 다음과 같은 작업을 수행해야합니다

1) 클릭 +/- 기호 서버 측 코드에 의해 생성 된 당신의 체크 박스()를 교체합니다.

확인란을 찾아 기본 단계를 배경 이미지가 + 인 빈 링크로 바꾸면됩니다.

$('checkbox').remove().html('<a href="#" style="background-image:plusSign.png">Some Name</a>');

대신 인라인 스타일의 당신이 방법을 알고 있다면 당신은 더하기와 빼기 기호 배경 이미지 CSS 클래스를해야한다.

2) 당신은에 +를 변경하려면 - 클릭했을 때, 3) 하늘의 입력 상자에 (다른 곳을 표시)

을을 전환하려면 옆에있는 + 기호에 사용자의 이름이? 배경 이미지를 클릭했을 때 스타일 (또는 이미지를 CSS 클래스로 만드는 방법을 알고 있다면 클래스) 만 변경하면됩니다. 그런 다음 내용을 가져 와서 대상 요소에 넣으십시오.

이 jsFiddle은 내가 위에서 설명하고있는 무슨을 설명하기 위해 도움이 될 수 있습니다 : http://jsfiddle.net/Ap2yW/1/