자바 스크립트 확인란 onChange

양식에 확인란이 있으며 다음 시나리오에 따라 작동하도록하고 싶습니다.

• 누군가 확인하면 텍스트 필드 ( totalCost) 의 값을 로 설정해야합니다 10.
• 그런 다음 돌아가서 선택을 취소하면 함수 calculate()는 totalCost다른 매개 변수에 따라 값을 양식으로 설정합니다.

따라서 기본적으로 확인란을 선택할 때 한 가지 작업을 수행하고 선택 해제하면 다른 작업을 수행하는 부분이 필요합니다.

function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

순수한 자바 스크립트 :

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

My Checkbox: <input id="myCheckbox" type="checkbox" />

jQuery를 사용하는 경우 다음을 제안 할 수 있습니다. 참고 : 여기에 몇 가지 가정을했습니다.

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});

확인란을 클릭 할 때마다 실제로 변경되므로 onclick 이벤트를 사용하십시오.

다음 솔루션은 jquery를 사용합니다. id의 확인란이 있다고 가정합니다 checkboxId.

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});

HTML :

<input type="checkbox" onchange="handleChange(event)">

JS :

function handleChange(e) {
     const {checked} = e.target;
}

#가 아닌 id로 확인란을 참조하십시오. # change 속성을 사용하는 대신 onclick 속성에 함수를 할당하십시오.

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};

나는 이것이 멍청한 대답처럼 보이지만 나중에 다른 사람들을 도울 수 있도록 여기에 넣고 있습니다.

foreach 루프가있는 테이블을 작성한다고 가정하십시오. 그리고 동시에 끝에 확인란을 추가하십시오.

<!-- Begin Loop-->
<tr>
 <td><?=$criteria?></td>
 <td><?=$indicator?></td>
 <td><?=$target?></td>
 <td>
   <div class="form-check">
    <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> 
<!-- mark as 'checked' if checkbox was selected on a previous save -->
   </div>
 </td>
</tr>
<!-- End of Loop -->

숨겨진 입력으로 테이블 아래에 버튼을 배치합니다.

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->

 <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
 <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>

다음과 같이 스크립트를 작성할 수 있습니다.

<script type="text/javascript">
    var checkboxes = document.getElementsByClassName('form-check-input');
    var i;
    var tid = setInterval(function () {
        if (document.readyState !== "complete") {
            return;
        }
        clearInterval(tid);
    for(i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener('click',checkBoxValue);
    }
    },100);

    function checkBoxValue(event) {
        var selected = document.querySelector("input[id=selected]");
        var result = 0;
        if(this.checked) {

            if(selected.value.length > 0) {
                result = selected.value + "," + this.value;
                document.querySelector("input[id=selected]").value = result;
            } else {
                result = this.value;
                document.querySelector("input[id=selected]").value = result;
            }
        }
        if(! this.checked) { 

// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.

            var compact = selected.value.split(","); // split string into array
            var index = compact.indexOf(this.value); // return index of our selected checkbox
            compact.splice(index,1); // removes 1 item at specified index
            var newValue = compact.join(",") // returns a new string
            document.querySelector("input[id=selected]").value = newValue;
        }

    }
</script>

체크 박스의 ID는 결과 변수 내에서 문자열 "1,2"로 제출됩니다. 그런 다음 원하는대로 컨트롤러 수준에서 분리 할 수 ​​있습니다.

자바 스크립트

  // on toggle method
  // to check status of checkbox
  function onToggle() {
    // check if checkbox is checked
    if (document.querySelector('#my-checkbox').checked) {
      // if checked
      console.log('checked');
    } else {
      // if unchecked
      console.log('unchecked');
    }
  }

HTML

<input id="my-checkbox" type="checkbox" onclick="onToggle()">

시험

totalCost.value = checkbox.checked ? 10 : calculate();

function change(checkbox) {
  totalCost.value = checkbox.checked ? 10 : calculate();
}

function calculate() {
  return other.value*2;
}

input { display: block}

Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />