2017-10-08 2 views
0

사용자가 체크 박스를 선택하거나 해제 할 때 폼을 자동 저장하려고합니다. 클릭 할 때마다 onchange를 사용하려고 생각했지만, 내 페이지에는 150 개가 넘는 체크 박스가 있다는 것을 생각하면 쓸데없는 것 같았습니다. 개인별로 발사해야합니다. 체크 박스체크 박스 노드 자동 저장

내 코드는 다음과 같습니다

<div class="form-check"> 
<label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value=""> 
    setting a 
</label> 
</div> 

나는 아직 값을 추가하지 않은하지만 그들은 {{ user.settings.a.aa }}

이 일을 가장 좋은 방법은 무엇입니까 같은 것인가? 나는 온라인에서 주위를 둘러 보았고 어느 방법이 좋고 적절하다고 생각하는지 모르겠습니다.

+0

도움이되기를 바랍니다 ...

$('input.form-check-input').change(function() { var chkid = $(this).attr(id), chkvalue = $(this).val(); $.ajax({ type: 'POST', url: '/backend/recordcheckboxchange.js', data: { id: chkid, value: chkvalue }, dataType: 'json', async: true, success: function(data) { // Your backend file can return a JSON with the result, // so you can alert in case of error. For example... if (data.result) alert('ERROR: Fail changing the checkbox value'); } }); }); 

을 체크 박스 식별자와 매개 변수로 값을 전송, 당신의 node.js 또는 express.js 백엔드 파일에 아약스 전화를 걸, 그래서 변화를 기록 할 수 있습니다 이벤트 위임을 사용하여 모든 체크 상자에 대해 단일 리스너 만 필요합니까? – skirtle

답변

0

먼저 HTML의 각 확인란을 식별 할 수있는 방법이 있어야합니다. 그런 다음

<div class="form-check"> 
    <label for="settinga" class="form-check-label"> 
    <input class="form-check-input" id="settinga" type="checkbox" value=""> 
    setting a 
    </label> 
</div> 
<div class="form-check"> 
    <label for="settingb" class="form-check-label"> 
    <input class="form-check-input" id="settingb" type="checkbox" value=""> 
    setting b 
    </label> 
</div> 
........... 

당신이 하나 개의 onchange를 이벤트를 생성해야합니다 ... 좋은 옵션은 각각에 대해 서로 다른 id 속성 것 (당신은 또한 해당 label에 대한 for 속성을 만들 것을 사용할 수 있습니다) 모든 것을 다룰 수 있습니다. 발사 할 때, 나는 그것이 아마도

+0

감사합니다. 저는 아침에 이것을 구현하려고합니다. 모델이 /models/user.js 아래에 있으면 express route가 어떻게 생겼는지 궁금합니다. user.settings.it.settinga –