How to get the value of the value and also the name of the checkbox at the same time as selecting jquery

Asked

Viewed 2,292 times

3

I need to get the name of checkbox selected as soon as I click one of the checkbox that exist on the page. The value I already got it, but I need to also take the value of name.

Could someone help me or give me another alternative because I need to take the value of name and value at the same time as clicking.

$(document).ready(function () {
		
	$('input[name="1117"]').click(function () { 
		selecionado('1117'); 
	}); 
	var selecionado = function (grupo) { 
		var result = $('input[name="' + grupo + '"]:checked'); 
		if (result.length > 0) { 
			var contador = result.length + " selecionado(s)<br/>"; 
			result.each(function () { 
				contador += $(this).val() + " "
			}); 
			$('#divFiltros').html(contador); 
		} 
		else { 
			$('#divFiltros').html("Nenhum selecionado"); 
		} 
	}; 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divFiltros"></div>

<form method="POST"> 
      
      <legend>Marca</legend>
      
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="6327" name="1117" value="6327">
           <label for="">Samsung</label>
      </div>
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="6327" name="1117" value="6328">
           <label for="">Motorola</label>
      </div>
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="6327" name="1117" value="6329">
           <label for="">Sony</label>
      </div>
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="6327" name="1117" value="6330">
           <label for="">LG</label>
      </div>
      
      <legend>Especificação</legend>
      
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="450" name="1120" value="450">
           <label for="450">4G</label>
      </div>
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="455" name="1120" value="455">
           <label for="455">2 Chips</label>
      </div>
      <div class="checkbox checkbox-success">
           <input class="styled marca" type="checkbox" id="461" name="1120" value="461">
           <label for="461">Video 4K</label>
      </div>
</form>

  • 1

    Have you tried it with this.name inside the Event Handler?

  • not yet...how would it be? I know a lot about Jquery, just a little bit of php

  • How you need to use the name?

  • Take a look here: https://jsfiddle.net/0y8heu9r/

  • Almost that...=) I need you to show them all at the same time, because when we click on Specifications some the Brand.... would have like to show everything together?

  • merged type show Brand and Specification in #divFilters

  • So you don’t need the name, you want to fetch all marked inputs regardless of the name, that’s it?

  • need the 2 because I need to use the 2 name and value to fetch the products according to the code of the specifications and the specification itself said.

  • EX: Brand id: 1117 Sansung id:6327, LG id:6328...

  • Specification id: 1120 - 4g id:450, 2chips id:455...

  • Okay, something like that: https://jsfiddle.net/0y8heu9r/1/ ?

  • ISSOOOOO.... SHOWWW

  • VERY GOOD....

  • Thank you Sergio that I really needed, God Bless!!!

  • You’re welcome, I’ll give you an answer to make it more complete.

Show 10 more comments

1 answer

1

name is an object property. It is also an attribute of the element that this object represents.

That means you can get that amount with .name or with getAttribute('name');.

So if what you’re looking for is to know which items have been selected you can use:

var escolhidos = $('input:checked');

to know which ones checkbox marked, and then map that array only with what matters: the name and the value.

var escolhidos = $('input:checked');
var selecionados = escolhidos.map(function() {
     var produto = {nome: this.name, value: this.value};
     return produto;
}).get(); // o .get() é para discartar o jquery e trabalhar só com uma array nativa

example: https://jsfiddle.net/3nexkLnn/

  • Hello Sergio, how could I make the sum of values of the inputs in this jsfiddle?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.