Concatenate checkbox

Navigation
1

I have a question, which is the following: I'm doing a questionnaire but the dynamic is as follows:

1.- What cities have you visited?
[] Mexico
[] Brazil
[] Africa

The question I have is how to concatenate the options that you choose in JavaScript , that question or questions are in a form of HTML but I want to concatenate if you choose one or several options to send them as an answer to that question.

The idea is that if you choose Mexico and Brazil, send in response: México || Brasil or something that separates but that the answers come together in a String or something to send that answer concatenated.

Greetings.

    
asked by mazhivo 01.03.2017 в 23:26
source

4 answers

1

var elementoPaises = document.getElementById('paises')
var paisesElegidos = []

function elegirPais(element){
    if (element.checked) {
        paisesElegidos.push(element.value)
    }else{
        paisesElegidos.splice( paisesElegidos.indexOf( element.value ), 1 )
    }
    elementoPaises.innerHTML = paisesElegidos.join(', ')
}
<p><input type="checkbox" value="Mexico" onclick="elegirPais(this)"> Mexico</p>
<p><input type="checkbox" value="Brasil" onclick="elegirPais(this)"> Brasil</p>
<p><input type="checkbox" value="Africa" onclick="elegirPais(this)"> Africa</p>

<p>Has visitado <span id="paises"></span></p>
    
answered by 02.03.2017 / 00:06
source
0

It is enough that you put the same "name" attribute in the three and on the server side you receive them as you would normally receive them but you would save them in an array, list, etc and already.

    
answered by 01.03.2017 в 23:30
0

One way to do this, which will treat the set of checkboxes as an array, is to put the same name for everyone, followed by square brackets [].

In this case, the request passes an array of countries to the backend. 

jQuery(document).ready(function() {

  jQuery('#probar').on('click',function() {
   console.log(jQuery('#checkboxes').serialize());
  });
});
label {
 clear:both;
 display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="checkboxes">

<label><input type="checkbox" name="pais[]" value="mexico"/>México</label>
<label><input type="checkbox" name="pais[]" value="chile"/>Chile</label>
<label><input type="checkbox" name="pais[]" value="colombia"/>Colombia</label>
<label><input type="checkbox" name="pais[]" value="argentina"/>Argentina</label>

<input type="submit" id="probar" value="enviar"  />

</form>

PS: None of the options is a city, but those are details.

    
answered by 02.03.2017 в 00:00
0

This code will return an array with the names of selected countries. You can use that array for the operations you need: either display them in your html, or send them to your server through a php file 

<!--jQuery-->

$(function() {
      $("#btn-paises").click( function()
      {
   		var arrPaises = $('input[name="paises"]:checked').map(function() 
        {
      		return $(this).val();
		    }).get();
            console.log(arrPaises);  
            alert(arrPaises);  

	    });
    });
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<p>Países visitados:</p>
<label><input type="checkbox" id="cbox1" name="paises" value="Brasil"> Brasil</label><br>
<label><input type="checkbox" id="cbox2" name="paises" value="México"> México</label><br>

<label><input type="checkbox" id="cbox3" name="paises" value="Colombia"> Colombia</label><br>
<button id="btn-paises">Enviar Países</button>
<div id="datos"></div>

Example of result: You will obtain an array with the values of the selected checkboxes, with which you can operate for your needs. 
["Brasil", "México"]

Reading the values of the array is very easy, for example: 

$.each(arrPaises, function (k, v) { 
  console.log('País: '+v); 
});

The name of each country will have the value v inside the loop.

If you want to send it to the server through PHP you can pass the complete array, without reading it, to your PHP.

It is a clean and orderly way to proceed. Everything will depend on your needs.

    
answered by 02.03.2017 в 00:14
Disable SELECT options if it already has value Complex component as a modal. Angular 2