Develop Reference

Javascript, form, checkbox results into an array

I am trying to get the results from a form - in particular a multicheckbox.
So I want to get the results as a simple array
[2,4,6,5,7]
I've tried these -
$('.ids:checked').serialize()
$('.ids:checked').serializeArray()

Use jQuery map() method to generate the collection and get it as an array using get() method.
$('.ids:checked').map(function(){
// return the value, which would be the collection element
return this.value;
// get it as an array
}).get()
$("button").click(function() {
console.log($('input:checked').map(function() {
return this.value;
}).get());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="bla1" value="something1">
<input type="checkbox" name="bla2" value="something2">
<input type="checkbox" name="bla3" value="something3">
<input type="checkbox" name="bla4" value="something4">
<input type="checkbox" name="bla5" value="something5">
<input type="checkbox" name="bla6" value="something6">
</form>
<button>
Click
</button>
Or use jQuery.map() method to iterate and generate array where first argument in callback refers to the element.
$.map($('.ids:checked'),function(ele){
// return the value, which would be the array element
return ele.value;
});
$("button").click(function() {
console.log($.map($('input:checked'), function(ele) {
return ele.value;
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="bla1" value="something1">
<input type="checkbox" name="bla2" value="something2">
<input type="checkbox" name="bla3" value="something3">
<input type="checkbox" name="bla4" value="something4">
<input type="checkbox" name="bla5" value="something5">
<input type="checkbox" name="bla6" value="something6">
</form>
<button>
Click
</button>

var myArray = Array.prototype.map.call($('.ids:checked'), function(item){return item.value;});
use the core js array map method and binds it to your jquery object

Is there any way to have a checkbox add a number "1" into a number type box upon clicking?

Is there any way I can have a user check a box and it automatically adds a number 1 in a corresponding number box? This is what I have so far, but it's not adding a number into the box when I check it. Where am I going wrong?
$(document).ready(function () {
$(".copyMe").keyup(function () {
$(".copyMe").val($(this).val());
});
});
<input class="copyMe" type="checkbox" />
<input class="copyMe" type="number" />

Is this what you're after? (Jsfiddle)
<input class="copyMeCheckbox" type="checkbox" />
<input class="copyMeNumber" type="number" />
$('.copyMeCheckbox').on('change',function(){
$('.copyMeNumber').val(1);
});

The problem is you have to differentiate between the check box and the number input. (EDIT: note that you can do this without changing the class, but I've done that here to be more specific in naming the elements). If you want to make the number input "1" when the box is checked, you have to have a handler on the checkbox. fiddle here: http://jsfiddle.net/h42j0ph3/1/
<div class="checkbox-number-container">
<input class="check-box" type="checkbox" />
<input class="number-input" type="number" value="0" />
</div>
$(".checkbox-number-container .check-box").on('click', function () {
var $checkbox = $(this);
var $numberInput = $checkbox.parent('.checkbox-number-container').find('.number-input');
if($checkbox.is(':checked')){
$numberInput.val(1);
}
else{
$numberInput.val(0);
}
});

Provided that you love to keep your markup at it is, here's you can do to make it work :
<input class="copyMe" type="checkbox" />
<input class="copyMe" type="number" />
$(document).ready(function () {
$("input:checkbox[class='copyMe']").on("change",function ()
{
$("input[type='number'][class='copyMe']").val('1');
});
});
Jsfiddle : https://jsfiddle.net/s4unjx41/1/

Use JQuery to add a class to an element after doing document.location.href =

I want to be able to click on a category, the page will refresh but I would like to keep track of the active category. (only one)
I would like to do something like addClass.
<form id="filter_on_cat" action="{$request|escape:'htmlall':'UTF-8'}">
<input class="select_default" type="submit" name="2" value="value4">
<input class="select_3" type="submit" name="0" value="value3">
<input class="select_2" type="submit" name="1" value="value2">
<input class="select_1" type="submit" name="3" value="value1">
</form>
<script type="text/javascript">
function search_perso(e){
// some code
document.location.href = same_page_but_different_content
}
$(document).ready(function(){
$('.select_default').click(function(){
search_perso($(this));
$(this).addClass('active_class');
return false;
});
});
</script>

Do something like this:
<form id="filter_on_cat" action="{$request|escape:'htmlall':'UTF-8'}">
<input type="radio" name="category" value="1" />Cat 1
<input type="radio" name="category" value="2" />Cat 2
<input type="radio" name="category" value="3" />Cat 3
</form>
$(document).ready(function () {
$('input[name=category]').change(function () {
$('form#filter_on_cat').submit();
});
});
Now on the serverside read the post var of "category". From here you can manipulate the button on the continuationpage.
Or you could make links of the categories, and add a parameter to the URL. You can then read the value of the parameter in javascript or serverside code and add an 'active' class.

You can maintain the state by storing the active element using HTML5 Local Storage (aka Web Storage).
The example below stores the name property of the button.
$(document).ready(function(){
$('.select_default').click(function(){
localStorage.setItem('activeCategory', this.name); // store locally
search_perso($(this));
return false;
});
// set the active category by reading from local storage
var activeCategory = localStorage.getItem('activeCategory');
if(activeCategory != null){
$('#filter_on_cat input').filter(function(){
return this.name == activeCategory;
}).addClass('active_class');
}
});

changing the checked attribute of checkbox using jquery

I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.

Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO

You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle

Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo

CSS is not changing through calling JS in HTML

my JS code is bellow:
// JavaScript Document
function bubbleColor() {
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}
}
var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
And my targeted HTML:
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
Desired output:
When somebody checks [selects] both the Checkbox1 and Checkbox2, the #6 background should be Red color.
Problem:
The code does not seem to work.
Any help please?

Im assuming you are using jquery (as you are changing css with jquery)
The behaviour you describe in your question implies that changing the checkbox should trigger a verification, so why do you attach the bubbleColor function to clicking on the .bubble div?
Try something like this:
// Alternatively you could use a class to select the checkboxes
$("input[type='checkbox']").change(bubbleColor);
Ofcourse ideally you should change your function to remove the red color if you uncheck the boxes:
function bubbleColor() {
if ($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) {
$(".bubble").css("background-color", "red");
} else {
$(".bubble").css("background-color", "transparent");
}
}
Fiddle: http://jsfiddle.net/sQCcF/2/
Edit:
If what you want is to ensure user only selects 1 option then you should use radio buttons instead of checkboxes, as that is the default behavior:
<input type="radio" name="inputname" value="1"/>
<input type="radio" name="inputname" value="2"/>
<input type="radio" name="inputname" value="3"/>
The name has to be the same for the inputs, but each one will have a different value, selecting one will automatically unselect the other.

Problem is at
var el = document.getElementById(".bubble");
You are selecting element with ID of .bubble (bubble is a class)
Change it to and check :
var el = document.getElementById("circle");

First of all you attach an event handler for the click event on div with class "bubble".
Then, you use document.getElementById method to select an element but you use as argument the class of that element, not the ID.
For this to work you need to attach the click event handler to checkbox elements.
Something like this:
$('input[type="checkbox"]').click(function() {
bubbleColor();
});

Replace var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
with
$(".bubble").click(bubbleColor) ;
should work.

Try this code
HTML
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1" class="chBox"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2" class="chBox" /> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3" class="chBox" /> Answer three <br/>
JQUERY
$(document).ready(function(){
// you can use '.chBox class or input[type='checkbox']'
$('.chBox').bind('click', function(){
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}else{
$(".bubble").css("background-color", "#fff");
}
});
});