count radiobuttons

Question

count radiobuttons

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good as I can tell the radio butons I have a list

<td style="text-align:center; border: black 5px;width: 5%;">
                        <input style="width: 17px; height: 17px;"ut id="check_1" type="radio" class="radio" name="r1" value="">
                    </td>
                    si<td style="text-align:center; border: black 5px;width: 5%;">
                       no <input style="width: 17px; height: 17px;"ut id="check_2" type="radio" class="radio" name="r1" value="">
                    </td>

Thus, they are around 220 radio the id of the radio id="check_1" reaches up to 220 in the table that made the check_1 is yes and the check_2 is not and so it goes consecutively, the question is how can I know when they select all that are yes and all that are not, all the radios have a different name so that I can only select yes or no

javascript jquery

asked by Juan Jose 20.10.2018 в 21:55

source

2 answers

How to use the Urlserialize doubt how to search data in a txt

score 0 · Answer 1

With a each in jquery to go through all the type radio inputs, within this cycle increment a variable only if it is marked

to the inputs you can define a class that indicates that yes or no

<input class="class_si" style="width: 17px; height: 17px;"ut id="check_1" type="radio" class="radio" name="r1" value="">
<input class="class_no" style="width: 17px; height: 17px;"ut id="check_2" type="radio" class="radio" name="r2" value="">

var cont=0;
$('.class_si input[type=radio]').each(function(){
    if( $(this).is(':checked') ){
        cont++;
    }
})

Another option would be the following one, it will only go through the marked ones var cont = 0;

$(".class_si input:radio:checked").each( function() { 
     cont++;
 });

this way is more direct

$(".class_si input:radio:checked").length

score 0 · Answer 2

I made a table with 3 rows and the checkboxes that you indicate in your statement; what I did was a change event about the radio type inputs to detect when to change or they are selected or deselected and within this event I show you how to obtain the YES and NO that have been selected:

$('input[type="radio"]').change(function(){
  let numSi = $('#check_1:checked').length;
  let numNo = $('#check_2:checked').length;
  $(".total-si").html(numSi);
  $(".total-no").html(numNo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tr>
  <td style="text-align:center; border: black 5px;width: 5%;">
   si <input style="width: 17px; height: 17px;"ut id="check_1" type="radio" class="radio" name="r1" value=""> 
  </td>
  <td style="text-align:center; border: black 5px;width: 5%;">
   no <input style="width: 17px; height: 17px;"ut id="check_2" type="radio" class="radio" name="r1" value="">
  </td>
 </tr>
 <tr>
  <td style="text-align:center; border: black 5px;width: 5%;">
   si <input style="width: 17px; height: 17px;"ut id="check_1" type="radio" class="radio" name="r2" value=""> 
  </td>
  <td style="text-align:center; border: black 5px;width: 5%;">
   no <input style="width: 17px; height: 17px;"ut id="check_2" type="radio" class="radio" name="r2" value="">
  </td>
 </tr>
 <tr>
  <td style="text-align:center; border: black 5px;width: 5%;">
   si <input style="width: 17px; height: 17px;"ut id="check_1" type="radio" class="radio" name="r3" value=""> 
  </td>
  <td style="text-align:center; border: black 5px;width: 5%;">
   no <input style="width: 17px; height: 17px;"ut id="check_2" type="radio" class="radio" name="r3" value="">
  </td>
 </tr>
 <tr>
  <td style="text-align:center; border: black 5px;width: 5%;">
    Cantidad de SI selecionados
  </td>
  <td style="text-align:center; border: black 5px;width: 5%;">
   Cantidad de NO selecionados
  </td>
 </tr>
 <tr>
  <td class="total-si" style="text-align:center;"></td>
  <td class="total-no" style="text-align:center;"></td>
 </tr>
</table>

I hope it serves you.