सुनिश्चित करना कि कम से कम एक चेकबॉक्स चेक किया गया है

Question

मेरे पास एकाधिक चेकबॉक्स वाले एक फॉर्म हैं और मैं यह सुनिश्चित करने के लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं कि कम से कम एक चेक किया गया हो। मेरे पास अभी यही है लेकिन कोई फर्क नहीं पड़ता कि कोई अलर्ट चुने गए हैं।

जे एस (गलत)

function valthis(){ 
if (document.FC.c1.checked) { 
    alert ("thank you for checking a checkbox") 
    } else { 
    alert ("please check a checkbox") 
    } 
} 

एचटीएमएल

<p>Please select at least one Checkbox</p> 
<br> 
<br> 
<form name = "FC"> 
<input type = "checkbox" name = "c1" value = "c1"/> C1 
<br> 
<input type = "checkbox" name = "c1" value = "c2"/> C2 
<br> 
<input type = "checkbox" name = "c1" value = "c3"/> C3 
<br> 
<input type = "checkbox" name = "c1" value = "c4"/> C4 
<br> 
</form> 
<br> 
<br> 

<input type = "button" value = "Edit and Report" onClick = "valthisform();"> 

तो क्या मैं जे एस में कर समाप्त हो गया यह था:

function valthisform(){ 
var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked 

if (chkd == true){ 

} else { 
    alert ("please check a checkbox") 
} 

} 

मैंने शेष असाइनमेंट के साथ फिट करने के लिए "धन्यवाद" भाग छोड़ने का निर्णय लिया। बहुत बहुत धन्यवाद, हर किसी की सलाह वास्तव में मदद की।

Answer 1

यदि आप उन्हें document.FC.c1 जैसे संदर्भित करने की योजना बनाते हैं तो आपको उसी नाम के साथ दो चेकबॉक्स होने से बचना चाहिए। यदि आपके पास c1 नामक एकाधिक चेकबॉक्स हैं, तो ब्राउजर को यह पता चल जाएगा कि आप किसका संदर्भ दे रहे हैं?

यहां एक गैर-jQuery समाधान है यह जांचने के लिए कि पृष्ठ पर कोई भी चेकबॉक्स चेक किया गया है या नहीं।

var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked); 

आप एक सरणी है कि आप पर some कॉल कर सकते हैं में document.querySelectorAll से कन्वर्ट करने के लिए NodeList लौटे Array.prototype.slice.call भाग की जरूरत है।

Answer 2

यह काम करना चाहिए:

function valthisform() 
{ 
    var checkboxs=document.getElementsByName("c1"); 
    var okay=false; 
    for(var i=0,l=checkboxs.length;i<l;i++) 
    { 
     if(checkboxs[i].checked) 
     { 
      okay=true; 
      break; 
     } 
    } 
    if(okay)alert("Thank you for checking a checkbox"); 
    else alert("Please check a checkbox"); 
} 

आप कोड के बारे में एक सवाल है, बस टिप्पणी है।

---

^{मैं l=checkboxs.length का उपयोग प्रदर्शन में सुधार होगा। http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

Answer 3

Check this.

आप उनके नाम के माध्यम से फ़ॉर्म इनपुट का उपयोग नहीं कर सकते हैं। इसके बजाय document.getElements विधियों का उपयोग करें।

Answer 4

jQuery का उपयोग करके, भाई आप उपयोगकर्ता को अंतिम चेक किए गए चेकबॉक्स को अचयनित करने से रोक सकते हैं।

$('input[type="checkbox"][name="chkBx"]').on('change',function(){ 
 
    var getArrVal = $('input[type="checkbox"][name="chkBx"]:checked').map(function(){ 
 
    return this.value; 
 
    }).toArray(); 
 
    
 
    if(getArrVal.length){ 
 
    //execute the code 
 
    $('#cont').html(getArrVal.toString()); 
 
    
 
    } else { 
 
    $(this).prop("checked",true); 
 
    $('#cont').html("At least one value must be checked!"); 
 
    return false; 
 
    
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value1" checked> Value1 
 
</label> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value2"> Value2 
 
</label> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value3"> Value3 
 
</label> 
 

 
<div id="cont"></div>

Answer 5

< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" > </script > 
    < script type = "text/javascript" > 

function checkSelectedAtleastOne(clsName) { 
    if (selectedValue == "select") 
     return false; 

    var i = 0; 
    $("." + clsName).each(function() { 

     if ($(this).is(':checked')) { 
      i = 1; 
     } 

    }); 

    if (i == 0) { 
     alert("Please select atleast one users"); 
     return false; 
    } else if (i == 1) { 
     return true; 
    } 

    return true; 

} 

$(document).ready(function() { 
    $('#chkSearchAll').click(function() { 

     var checked = $(this).is(':checked'); 
     $('.clsChkSearch').each(function() { 
      var checkBox = $(this); 
      if (checked) { 
       checkBox.prop('checked', true); 
      } else { 
       checkBox.prop('checked', false); 
      } 
     }); 

    }); 

    //for select and deselect 'select all' check box when clicking individual check boxes 
    $(".clsChkSearch").click(function() { 

     var i = 0; 
     $(".clsChkSearch").each(function() { 

      if ($(this).is(':checked')) {} 
      else { 

       i = 1; //unchecked 
      } 

     }); 

     if (i == 0) { 
      $("#chkSearchAll").attr("checked", true) 
     } else if (i == 1) { 

      $("#chkSearchAll").attr("checked", false) 
     } 

    }); 

}); 

</script > 

Answer 6

वेनिला जे एस:

var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable 

function activitiesReset() { 
    var checkboxesChecked = function() { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false. 
     for (var i = 0; i < checkboxes.length; i++) { 
      if (checkboxes[i].checked) { 
       return true; 
      } 
     } 
     return false; 
    } 
    error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead. 
     if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked 
      error[2].style.display = 'block'; // red error label is now visible. 
     } 
} 

for (var i=0; i<checkboxes.length; i++) { // whenever a checkbox is checked or unchecked, activitiesReset runs. 
    checkboxes[i].addEventListener('change', activitiesReset); 
} 

स्पष्टीकरण:
एक बार कोई फ़ॉर्म सबमिट करने का प्रयास किया गया है, यह आपके चेकबॉक्स खंड 'अपडेट करेगा यदि वह अभी तक नहीं है तो चेकबॉक्स को चेक करने के लिए उपयोगकर्ता को सूचित करने के लिए लेबल। यदि कोई चेकबॉक्स चेक नहीं किया गया है, तो एक छुपा 'त्रुटि' लेबल प्रकट होता है जिससे उपयोगकर्ता को 'चेकबॉक्स चेक करें!' पर संकेत मिलता है। यदि उपयोगकर्ता कम-से-कम एक चेकबॉक्स चेक करता है, तो मूल लेबल को तुरंत लेबल करके लाल लेबल तत्काल छुपाया जाता है। यदि उपयोगकर्ता फिर से सभी चेकबॉक्स को अन-चेक करता है, तो रीयल-टाइम में लाल लेबल लौटाता है। (.addEventListener('change', function(){});

Answer 7

आप देख सकते हैं कि कम से कम एक चेकबॉक्स चयनित है या इस सरल कोड का उपयोग नहीं कर के रूप में लिखा यह जावा स्क्रिप्ट के onchange घटना से संभव बनाया है। आप भी अपने संदेश छोड़ सकते हैं।

संदर्भ Link

<label class="control-label col-sm-4">Check Box 2</label> 
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br /> 
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br /> 

<script> 
function checkFormData() { 
    if (!$('input[name=checkbox2]:checked').length > 0) { 
     document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null"; 
     return false; 
    } 
    alert("Success"); 
    return true; 
} 
</script>