클릭하면 숨겨진 필드에 여러 개의 체크 박스 값이 있음

Question

나는 각 값을 쉼표로 구분하여 숨겨진 필드에 들어가기 위해 몇 가지 체크 박스를 클릭했다. 체크하지 않으면 숨겨진 필드 값이 되돌아 간다. ~ -1. 아래는 내가 시도한 것입니다.

<input type="hidden" name="agreement_ids" value="-1"> 

<input type="checkbox" id="agreementChecker-1" name="agreeCheck-1" value="35" class="mandatory agreeChecker"> 
<input type="checkbox" id="agreementChecker-2" name="agreeCheck-2" value="45" class="mandatory agreeChecker"> 
<input type="checkbox" id="agreementChecker-3" name="agreeCheck-3" value="52" class="mandatory agreeChecker"> 

$('.agreeChecker').click(function(){ 

     if($(this).prop('checked')){ 

      var resultObj = $(this).val(); 
      var outputObj = $('input[name="agreement_ids"]'); 
      var stringToAppend = resultObj.val().length > 0 ? resultObj.val() + "," : ""; 
     resultObj .val(stringToAppend + outputObj.val()); 

     }else{ 
      if($('.agreement-text').length > 0){ 
       $('input[name="agreement_ids"]').val('-1');//uncheck 
      }else{ 
       $('input[name="agreement_ids"]').val(''); 
      } 
     } 
    }); 

Answer 1

쉼표로 구분 된 값을 작성하는 데 잘못된 방법이 있습니다. 체크 된 요소 값이 이미 숨겨진 필드에 추가되었는지 여부를 알아 내기가 어렵습니다.

나는

1) 길이의 경우 .map() 기능

3)를 사용하여 먼저 확인 요소

2) CSV를 만들기 위해 그 값에 가입을 얻을, 당신은에 클릭 핸들러를 수정하는 게 좋을 것 1 단계에서 검사 된 요소는 0, -1을 설정하고 위의 2 단계에서 조인 된 값을 설정합니다

$('.agreeChecker').click(function(){ 
    var $checkedagreeChecker = $('.agreeChecker:checked'); 
    var joinedValues = $checkedagreeChecker.map(function(){return this.value}).get().join(","); 
    $('input[name="agreement_ids"]').val($checkedagreeChecker.length > 0 ? joinedValues : -1) 
}); 

Answer 2

코드를 업데이트했습니다. 당신은 코드 아래에 확인하시기 바랍니다 J 쿼리 코드의 논리에 문제가

$(document).ready(function() { 
     $(".agreeChecker").click(function() { 
      var checked_checkboxes = $('#aggrement input[name="agreeCheck"]:checked'); 
      var message = ""; 
      var chkCount = 1; 
      checked_checkboxes.each(function() { 
       var value = $(this).val(); 
       var inputObj = $(this)[0]; 
       if (inputObj.checked) { 
        if (chkCount == 1) 
         message += value; 
        else 
         message += "," + value; 
        chkCount++; 
       } 
      }); 
      if (message == "") 
       $("#agrrementID").val("-1"); 
      else 
       $("#agrrementID").val(message); 
      console.log($("#agrrementID").val()); 
     }); 
    }); 

<div id="aggrement"> 
     <label> 
      <input type="checkbox" id="agreementChecker-1" name="agreeCheck" value="35" class="mandatory agreeChecker">35</label> 
     <label> 
      <input type="checkbox" id="agreementChecker-2" name="agreeCheck" value="45" class="mandatory agreeChecker">45</label> 
     <label> 
      <input type="checkbox" id="agreementChecker-3" name="agreeCheck" value="52" class="mandatory agreeChecker">52</label> 

    </div> 
    <input type="hidden" name="agreement_ids" id="agrrementID" value="-1"> 

Answer 3

확인

$('.agreeChecker').click(function() { 
     if ($(this).prop('checked')) { 
      var resultObj = $(this).val(); 
      var outputObj = $('input[name="agreement_ids"]'); 
      var stringToAppend = resultObj.length > 0 ? resultObj + "," : ""; 
      if (outputObj.val() === '-1') { 
       $('input[name="agreement_ids"]').val(''); 
      } 
      outputObj.val(stringToAppend + outputObj.val()); 
     } else { 
      if ($('.agreement-text').length > 0) {     
       $('input[name="agreement_ids"]').val('-1');//uncheck 
      } else 
      { 
       $('input[name="agreement_ids"]').prop("value", "-1");     
      } 
     } 
    }); 

내가 작업 코드에서 일부 조건을 넣어하려고 잘 잘하면 그것은 당신에게

감사

도움이 될 수 있습니다