जावास्क्रिप्ट चेकबॉक्स onChange

Question

मेरे पास एक फॉर्म में एक चेकबॉक्स है और मैं निम्नलिखित परिदृश्य के अनुसार काम करना चाहूंगा:

• यदि कोई इसे चेक करता है, तो एक टेक्स्टफील्ड ( totalCost) का मान सेट होना चाहिए 10।
• फिर, अगर मैं वापस जाता हूं और इसे अनचेक करता हूं, तो एक फ़ंक्शन फॉर्म में अन्य मापदंडों calculate()के totalCostअनुसार मूल्य निर्धारित करता है ।

इसलिए मूल रूप से, मुझे उस हिस्से की आवश्यकता है, जहां मैं चेकबॉक्स की जांच करता हूं, मैं एक काम करता हूं और जब मैं इसे अनचेक करता हूं, तो मैं दूसरा काम करता हूं।

Comments

Checkboxid.Checked == true / false {अपना ईवेंट लिखें}।

— नरेश

Answer 1

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

एचटीएमएल

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

Comments

और अगर उपयोगकर्ता कीबोर्ड का उपयोग करता है?

— थोमथोम

यहाँ एक JsFiddle है जहाँ सभी विभिन्न तरीकों का परीक्षण किया जा सकता है: क्लिक, कीबोर्ड, लेबल और एक्सेसरी। वे सभी फ़ायरफ़ॉक्स में इवेंट को ट्रिगर करते हैं।

— रोमन स्टार्कोव

दुर्भाग्य से, इस घटना को ट्रिगर नहीं किया जाता है जब चेकबॉक्स राज्य को जावास्क्रिप्ट के माध्यम से बदल दिया जाता है।

— 22

योग्य, इसका उपयोग जावास्क्रिप्ट $ ('# चेकबॉक्स') से करें। attr ('चेक किया हुआ', 'चेक किया हुआ'); $ ( '# चेकबॉक्स') पर क्लिक करें ()।;

— सेनाड मेकिन

आपको इसके बजाय onchange का उपयोग करना चाहिए, यह विशेष रूप से OP के उपयोग के मामले के लिए डिज़ाइन किया गया है। (लिंक के लिए नीचे रीकेक्यू धन्यवाद) डेवलपर.mozilla.org/en-US/docs/Web/Events/change

— आर्मंडो

Answer 2

शुद्ध जावास्क्रिप्ट:

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" />

Answer 3

यदि आप jQuery का उपयोग कर रहे हैं .. तो मैं निम्नलिखित सुझाव दे सकता हूं: नोट: मैंने यहां कुछ धारणा बनाई है

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

Answer 4

ऑनक्लिक ईवेंट का उपयोग करें, क्योंकि चेकबॉक्स पर प्रत्येक क्लिक वास्तव में इसे बदल देता है।

Comments

यदि उपयोगकर्ता कीबोर्ड का उपयोग करता है तो क्या होगा?

— थोमथोम

यह

— स्ट्रेज

वास्तव में काम करता है पर क्लिक करें, यह तब भी निकाल दिया जाता है जब आप चेकबॉक्स को चालू करने के लिए एक लेबल का उपयोग करते हैं। लेकिन आपको 'परिवर्तन' घटना का बेहतर उपयोग करना चाहिए! 'परिवर्तन' की घटना इसके लिए है: developer.mozilla.org/en-US/docs/Web/Events/change

— ReeCube

डबल-क्लिक के बारे में क्या?

— चूने

अच्छा है कि दो क्लिक अब नहीं है?

— रोहमर

Answer 5

निम्नलिखित समाधान jquery का उपयोग करता है। मान लेते हैं कि आपके पास आईडी के साथ एक चेकबॉक्स है checkboxId।

const checkbox = $("#checkboxId");

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

Answer 6

HTML:

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

जे एस:

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

Answer 7

चेक आईडी का संदर्भ यह आईडी है और परिवर्तन विशेषता का उपयोग करने के बजाय ऑनक्लिक विशेषता के लिए फ़ंक्शन को असाइन करें

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

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

Answer 8

मुझे पता है कि यह नॉब जवाब की तरह लगता है लेकिन मैं इसे यहां रख रहा हूं ताकि भविष्य में दूसरों की मदद कर सके।

मान लीजिए कि आप एक फॉर्च्यूनर लूप के साथ एक टेबल बना रहे हैं। और अंत में चेकबॉक्स को जोड़ते हुए।

<!-- 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>

आपके चेकबॉक्स की आईडी परिणाम चर के भीतर एक स्ट्रिंग "1,2" के रूप में प्रस्तुत की जाएगी। फिर आप इसे नियंत्रक स्तर पर तोड़ सकते हैं, हालांकि आप चाहते हैं।

Answer 9

जावास्क्रिप्ट

  // 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');
    }
  }

एचटीएमएल

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

Answer 10

प्रयत्न

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 />