that only one checkbox is selected in my view

Question

that only one checkbox is selected in my view

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (1 votes)
#4 by (1 votes)

1

I want checkbox not Radiobutton both id serve to show and hide DIV and value send me value to the controller

<div class="row">
    <div class="col-lg-5">
        <input type="checkbox" name="tipoGrado"  id="checkGrado" value="1" onchange="javascript:showContentGrado()">Saldos por Grado
    </div>
    <div class="col-lg-5">
        <input type="checkbox" name="tipoResumen"  id="checkResumen" value="2" onchange="javascript:showContentResumen()"> Resumen de Saldos
    </div>
</div>

Do you know any javascript method?

javascript asp.net

asked by Rodrigo Rodriguez 05.01.2018 в 00:56

source

4 answers

Why does it return zero value? How to add an element with php

score 4 · Answer 1

I can think of something with jquery, like this:

$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

and in the HTML I would modify:

<div class="row">
    <div class="col-lg-5">
        <input type="checkbox" name=type  id="checkGrado" value="1" onchange="javascript:showContentGrado()">Saldos por Grado
    </div>
    <div class="col-lg-5">
        <input type="checkbox" name="type"  id="checkResumen" value="2" onchange="javascript:showContentResumen()"> Resumen de Saldos
    </div>
</div>

With that you can only select one from the same group with the same name, greetings

Fidle: link

score 4 · Answer 2

I think something like this can help you, it's something like kiramishima's answer, only that I use pure JS and used the classes not the "names" of the checkboxs.

let Checked = null;
//The class name can vary
for (let CheckBox of document.getElementsByClassName('only-one')){
	CheckBox.onclick = function(){
  	if(Checked!=null){
      Checked.checked = false;
      Checked = CheckBox;
    }
    Checked = CheckBox;
  }
}

<div class="row">
    <div class="col-lg-5">
        <input type="checkbox" name="tipoGrado"  id="checkGrado" value="1"  class="only-one">Saldos por Grado
    </div>
    <div class="col-lg-5">
        <input type="checkbox" name="tipoResumen"  id="checkResumen" value="2"  class="only-one"> Resumen de Saldos
    </div>
</div>

score 1 · Answer 3

    function uncheck(){
     var checkbox1 = document.getElementById("vehiculo");
     var checkbox2 = document.getElementById("moto"); 
    checkbox1.onclick = function(){ 
    if(checkbox1.checked != false){ 
    checkbox2.checked =null; }
     } 
    checkbox2.onclick = function(){ 
    if(checkbox2.checked != false){ 
    checkbox1.checked=null;
     }
     } 
    }

    <input type="checkbox" id="vehiculo" onclick="uncheck()" name="vehiculo"> Vehículo Liviano<br>
    <input type="checkbox" id="moto" onclick="uncheck()" name="moto"> Motocicleta<br>

score 1 · Answer 4

this code is also pure javascript:

function uncheck(){
    var checkbox1 = document.getElementById("vehiculo");
    var checkbox2 = document.getElementById("moto");
    checkbox1.onclick = function(){
    if(checkbox1.checked != false){
       checkbox2.checked =null;
    }
}
checkbox2.onclick = function(){
    if(checkbox2.checked != false){
        checkbox1.checked=null;
    }
  }
}

<input type="checkbox" id="vehiculo" onclick="uncheck()" name="vehiculo"> Vehículo Liviano<br>
<input type="checkbox" id="moto" onclick="uncheck()" name="moto"> Motocicleta<br>