How to call a change function with two different options

Adem · March 4, 2024, 8:49am

I have a code like below.
When I select a value in the Select option, I run the function with ‘#proje_nedir’.

I also want the function to run when I deselect the selection box.

However, without using ‘#proje_nedir’

$('body').on('change', 'input[name=farkli_kaydet]', function() {
    if (!$(this).is(':checked')) {
        var value = "Değer";
        $('#checkboxdan').trigger('change', [value]);
    }
});

$('#proje_nedir,#checkboxdan').change(function(event, value){
    var val = value || $(this).val();
    // devam eden kodlar
});

This code did not work $('#checkboxdan').trigger('change', [value]);
How can I run it?

astonecipher · March 5, 2024, 5:49pm

Do an event factory.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=initial-scale=1.0">
    <title>Document</title>
    <style>
                        /* Modal styles */
                        #modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        #modalContent {
            background: white;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            width: 100%;
        }

        #closeModal {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>

<input type="checkbox" id="option" value="alert">


<div id="modal">
    <div id="modalContent">
        <span id="closeModal" onclick="closeModal()">X</span>
        <h2>Modal</h2>
        <div id="modalDetails"></div>
    </div>
</div>

    <script>
    const option = document.getElementById("option");

option.addEventListener("change", factory);

function factory() {
  if(this.checked == true) {
    return checked();
  }
  return notChecked();
  
}

function checked() {
  alert("Checkboax is checked")
}

function notChecked() {
  openModal("Checkboax has not been checked")
}

function openModal(msg) {
  const modal = document.getElementById('modal');
  const modalDetails = document.getElementById('modalDetails');

  modalDetails.innerText = msg
  modal.style.display = 'flex';
}

function closeModal() {
  const modal = document.getElementById('modal');
  modal.style.display = 'none';
}
</script>
</body>
</html>