stackoom
  简体   繁体   中英

How to validate that at least one checkbox is checked in each set of checkboxes

 原文  2015-05-15 17:22:23  6   3    javascript/ jquery/ checkbox

Question

I have a large group of checkboxes that are separated by two tables. Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). I hope this makes sense. My code is below: 

<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>


<style type="text/css">
p
    {
        font-family: "Arial";
        align: center;
    }
h2
    {
        font-family: "Arial";
    }
</style>


<p>
<table border="1" align="center">

<tbody>
<tr>
    <th><b>COST</b></th>
    <th colspan="3">Reduced Cost</th>
    <th>Neutral</th>
    <th colspan="3">Increased Cost</th>
    <th>Don't Know</th>
</tr>
<tr>
    <th></th>
    <th>High</th>
    <th>Medium</th>
    <th>Low</th>
    <th>No effect</th>
    <th>Low</th>
    <th>Medium</th>
    <th>High</th>
    <th></th>
</tr>
<tr>
    <td>Capital cost</td>
    <td><input type="checkbox" id="matrix1" value="1"></td>
    <td><input type="checkbox" id="matrix2" value="1"></td>
    <td><input type="checkbox" id="matrix3" value="1"></td>
    <td><input type="checkbox" id="matrix4" value="1"></td>
    <td><input type="checkbox" id="matrix5" value="1"></td>
    <td><input type="checkbox" id="matrix6" value="1"></td>
    <td><input type="checkbox" id="matrix7" value="1"></td>
    <td><input type="checkbox" id="matrix8" value="1"></td>

</tr>
<tr>
    <td>Clinical operating cost</td>
    <td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix10" value="1"></td>
    <td><input type="checkbox" id="matrix11" value="1"></td>
    <td><input type="checkbox" id="matrix12" value="1"></td>
    <td><input type="checkbox" id="matrix13" value="1"></td>
    <td><input type="checkbox" id="matrix14" value="1"></td>
    <td><input type="checkbox" id="matrix15" value="1"></td>
    <td><input type="checkbox" id="matrix16" value="1"></td>

</tr>

<tr>
    <td>Facility operating cost</td>
    <td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix18" value="1"></td>
    <td><input type="checkbox" id="matrix19" value="1"></td>
    <td><input type="checkbox" id="matrix20" value="1"></td>
    <td><input type="checkbox" id="matrix21" value="1"></td>
    <td><input type="checkbox" id="matrix22" value="1"></td>
    <td><input type="checkbox" id="matrix23" value="1"></td>
    <td><input type="checkbox" id="matrix24" value="1"></td>
</tr>

<tr>
    <td>Energy cost</td>
    <td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix26" value="1"></td>
    <td><input type="checkbox" id="matrix27" value="1"></td>
    <td><input type="checkbox" id="matrix28" value="1"></td>
    <td><input type="checkbox" id="matrix29" value="1"></td>
    <td><input type="checkbox" id="matrix30" value="1"></td>
    <td><input type="checkbox" id="matrix31" value="1"></td>
    <td><input type="checkbox" id="matrix32" value="1"></td>
</tr>

<br>
<br>

<table border="1" align="center">

<tbody>
<tr>
    <th><b>BENEFIT</b></th>
    <th colspan="3">Negative Impact</th>
    <th>Neutral</th>
    <th colspan="3">Positive Impact</th>
    <th>Don't Know</th>
</tr>
<tr>
    <th></th>
    <th>High</th>
    <th>Medium</th>
    <th>Low</th>
    <th>No effect</th>
    <th>Low</th>
    <th>Medium</th>
    <th>High</th>
    <th></th>
</tr>
<tr>
    <td>Patient/staff safety</td>

    <td><input type="checkbox" id="matrix33" value="1"></td>
    <td><input type="checkbox" id="matrix34" value="1"></td>
    <td><input type="checkbox" id="matrix35" value="1"></td>
    <td><input type="checkbox" id="matrix36" value="1"></td>
    <td><input type="checkbox" id="matrix37" value="1"></td>
    <td><input type="checkbox" id="matrix38" value="1"></td>
    <td><input type="checkbox" id="matrix39" value="1"></td>
    <td><input type="checkbox" id="matrix40" value="1"></td>


</tr>
<tr>
    <td>Fire/life safety</td>
    <td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix42" value="1"></td>
    <td><input type="checkbox" id="matrix43" value="1"></td>
    <td><input type="checkbox" id="matrix44" value="1"></td>
    <td><input type="checkbox" id="matrix45" value="1"></td>
    <td><input type="checkbox" id="matrix46" value="1"></td>
    <td><input type="checkbox" id="matrix47" value="1"></td>
    <td><input type="checkbox" id="matrix48" value="1"></td>

</tr>

<tr>
    <td>Clinical quality of care</td>
    <td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix50" value="1"></td>
    <td><input type="checkbox" id="matrix51" value="1"></td>
    <td><input type="checkbox" id="matrix52" value="1"></td>
    <td><input type="checkbox" id="matrix53" value="1"></td>
    <td><input type="checkbox" id="matrix54" value="1"></td>
    <td><input type="checkbox" id="matrix55" value="1"></td>
    <td><input type="checkbox" id="matrix56" value="1"></td>
</tr>

<tr>
    <td>Patient/resident experience</td>
    <td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix58" value="1"></td>
    <td><input type="checkbox" id="matrix59" value="1"></td>
    <td><input type="checkbox" id="matrix60" value="1"></td>
    <td><input type="checkbox" id="matrix61" value="1"></td>
    <td><input type="checkbox" id="matrix62" value="1"></td>
    <td><input type="checkbox" id="matrix63" value="1"></td>
    <td><input type="checkbox" id="matrix64" value="1"></td>
</tr>

<tr>
    <td>Operational efficiency</td>
    <td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix66" value="1"></td>
    <td><input type="checkbox" id="matrix67" value="1"></td>
    <td><input type="checkbox" id="matrix68" value="1"></td>
    <td><input type="checkbox" id="matrix69" value="1"></td>
    <td><input type="checkbox" id="matrix70" value="1"></td>
    <td><input type="checkbox" id="matrix71" value="1"></td>
    <td><input type="checkbox" id="matrix72" value="1"></td>
</tr>

<tr>
    <td>Sustainability</td>
    <td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
    <td><input type="checkbox" id="matrix74" value="1"></td>
    <td><input type="checkbox" id="matrix75" value="1"></td>
    <td><input type="checkbox" id="matrix76" value="1"></td>
    <td><input type="checkbox" id="matrix77" value="1"></td>
    <td><input type="checkbox" id="matrix78" value="1"></td>
    <td><input type="checkbox" id="matrix79" value="1"></td>
    <td><input type="checkbox" id="matrix80" value="1"></td>
</tr>

<script type="text/javascript">
    $('input[type="checkbox"]').on('change', function() {

      // uncheck sibling checkboxes (checkboxes on the same row)
      $(this).closest('tr').find('input').not(this).prop('checked', false);

      // uncheck checkboxes in the same column
      $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

    });
</script>
</tbody>
</tbody>
</p>

3 answers

solution1
 2 ACCPTED  2015-05-15 17:34:05

You could add a class (like .checkbox ) to each of your checkboxes and then perform something like this before submit - 

if ($(".checkbox:checked").length > 0) {
    //perform submit
}
else{
    alert("check at least one checkbox!");
}

solution2
 0  2015-05-15 17:52:35

You could also use ".is: for more readability. 

 if ( $( '.checkbox' ).is( ':checked' ) ) { // atleast one checked } else { // none checked }

Example: https://jsfiddle.net/rr3vfymy/

solution3
 0  2015-05-15 17:59:17

First of all, your HTML isn't well-formed. You should close one table element before starting a new one.

Then start by distinguishing your tables by id, or at least by class, for example: 

<table id="cost-table" border="1" align="center">

and then check, if at least one is checked. If you are using jQuery, you can use something like: 

$( document ).ready( function() {
    // you should use id on form too, this will bug if you have more forms on your page
    $( "form" ).submit( function( event ) {
        if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
            event.preventDefault();
            //alert user here
            alert('You need to select at least one cost type');
        }
    });
});

and the same for other types.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to check that at least one checkbox is checked in multiple checkboxes? How to validate if there is at least one checkbox selected out of 3 checkboxes in angularjs How to validate at least one Checkbox is checked using JQuery? How to check at least one checkbox is checked from the array of checkboxes and the text area is not blank on checkbox with value “other” is checked? check at least one checkbox checked jquery Validate How to check each group of checkbox is checked at least one How to show div, if one of the checkboxes is checked (with a different name on each checkbox)? How can I hide a button until at least three input checkboxes (one from each separate set of six) are checked? How to check whether user has checked at least one checkbox from a group of checkboxes using jQuery/Javascript? How to check if at least one checkbox is checked from list of checkboxes with it name attribute as array
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM