Come verificare che almeno una casella di controllo sia selezionata in più checkbox?

Question

Nella mia forma vengono utilizzate così tante caselle di controllo. Voglio verificare che almeno una casella di controllo sia selezionata.

<div id="sun"> 
    <li><?php echo $this->__("SUN");?> </li> 
    <li><input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12AM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"></li> 
</div> 
<div id="mon"> 
    <li><?php echo $this->__("MON");?> </li> 
    <li><input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12AM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"></li> 
</div> 
<div id="tue"> 
    <li><?php echo $this->__("TUE");?> </li> 
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12AM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"></li> 
</div> 
<div id="wed"> 
    <li><?php echo $this->__("WED");?> </li> 
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12AM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"></li> 
    <li><input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"></li> 
</div> 

Come convalidare almeno una casella di controllo?

Answer 1

Qualcosa secondo le seguenti linee:

var formNodes = document.checks.getElementsByTagName('input'); 
for (var i=0;i<formNodes.length;i++) { 
    /* If one is true set a variable to true and exit the loop */ 
} 

postale Stack Overflow Here

Cheers,

Truez

Answer 2

var count= 0; 
var value_array=new Array(); 
jQuery('input[type="checkbox"]:checked').each(function(){ 
    value_array.push(jQuery(this).val()); 
    count = count + 1; 
}); 

// count&value_array will tell you total selected 

Answer 3

Beh, semplicemente:

var isSomeAlldayCheckboxChecked = document 
    .querySelectorAll('input[type="checkbox"].allday') 
    .some(function (each) { return each.checked; }); 

Answer 4

@herby La risposta è la risposta corretta per verificare se è stato selezionato un input nell'array input[type='checkbox'].

---

Questa risposta restituisce una matrice di ingressi controllati usando querySelectorAll (MyFormManager.get_checkedInputs); dimostra l'aggiunta di ascoltatori di eventi alle domande input elementi change evento (MyFormManager.init) - che aggiunge lo stato di controllo allo className dell'elemento (MyFormManager.onCheckChanged) - per facilitare il processo.

var MyFormManager = { 
 
    checkboxes: null, 
 
    onCheckChanged: function(sender, e) { 
 
    console.log("sender:= %o, e:= %o", sender, e); 
 
    sender.className = sender.className.replace(' true','').replace(' false',''); 
 
    sender.className += ' ' + String(sender.checked); 
 
    }, 
 
    init : function() { 
 
    checkboxes = document.querySelectorAll("input[type='checkbox']"); 
 
    for (var i = 0, max = checkboxes.length; i < max; i++) 
 
    { 
 
     checkboxes[i].addEventListener('change', MyFormManager.onCheckChanged.bind(null, checkboxes[i])); 
 
    } 
 
    }, 
 
    get_checkedInputs : function() { 
 
    return document.querySelectorAll("input[type='checkbox'].true"); 
 
    } 
 
} 
 

 
console.log(MyFormManager); 
 
    
 
MyFormManager.init(); 
 

 
var message = document.querySelector("div#message"); 
 
    
 
document.querySelector("button#runCheck").addEventListener("click", function (e) { 
 
    var checkedInputs = MyFormManager.get_checkedInputs(); 
 
    console.log(checkedInputs); 
 
    message.innerHTML = ""; 
 
    var parentId; 
 
    for (var i = 0, max = checkedInputs.length; i < max; i++) 
 
    { 
 
    parentId = checkedInputs[i].parentNode.parentNode.parentNode.id; 
 
    message.innerHTML += '<div class="item"><span class="parentId">' + parentId + '</span><span class="checkedInput">' + checkedInputs[i].value + '</span></div>'; 
 
    } 
 
});

body {background-color:whitesmoke;} 
 

 
div { display:block;} 
 

 
div > ul { 
 
    list-style:none; 
 
    margin:0.5em auto 0 auto; 
 
    padding:0.27em; 
 
    background-color:white; 
 
    border:0.05cm solid silver; 
 
} 
 

 
input[type='checkbox'] {cursor:pointer;} 
 

 
div:first-child > ul:first-child {margin-top:0em;} 
 

 
div > ul > li {list-style:none;} 
 

 
div > ul > li > label {display:inline-block;padding:0.1em 0.3em;margin:0;width:8em;text-align:right;} 
 

 

 
div.item {display:block;} 
 
div.item > span.parentId {display:inline-block;width:3em;text-transform:uppercase;} 
 
div.item > span.checkedInput {display:inline-block;width:8em;text-align:right;}

<div id="debugger"> 
 
    <div id='message'></div> 
 
    <button id='runCheck'>Run Check</button> 
 
</div> 
 

 
<div id="sun"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("SUN");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Sunday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Sunday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Sunday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="mon"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("MON");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Monday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Monday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Monday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="tue"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("TUE");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Tuesday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Tuesday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Tuesday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="wed"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("WED");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Wednesday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Wednesday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Wednesday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="thur"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("THUR");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Thursday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Thursday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Thursday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="fri"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("FRI");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Friday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Friday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Friday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="sat"> 
 
    <ul> 
 
    <li><!-- <?php echo $this->__("SAT");?> --></li> 
 
    <li> 
 
     <label>9AM - 12PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Saturday][9-12]" value="9AM - 12PM"> 
 
    </li> 
 
    <li> 
 
     <label>12PM - 6PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Saturday][12-6]" value="12PM - 6PM"> 
 
    </li> 
 
    <li> 
 
     <label>6PM - 9PM</label> 
 
     <input class="allday" type="checkbox" name="availableday[Saturday][6-9]" value="6PM - 9PM"> 
 
    </li> 
 
    </ul> 
 
</div>

---

nota che questo non è ottimizzata, anche non tiene conto per i controlli dinamici (postback o XHR);

Answer 5

Se si utilizza uno supported browser, è possibile utilizzare lo pseudo-selettore: controllato per un controllo veramente succinto. Basta fare qualcosa di simile:

if(document.forms[0].querySelector('input[type="checkbox"]:checked').length) { 
    //At least 1 checkbox is selected within document 
} 

Assicurati di indirizzare la forma corretta, sia attraverso document.querySelector o la lista document.forms sull'oggetto del documento (come visto sopra).

Answer 6

È possibile utilizzare Jquery per questo.

if ($('#form_id :checkbox:checked').length > 0) 
{ 
     // one or more checkboxes are checked 
} 
else 
{ 
     // no checkboxes are checked 
}