Develop Reference

Checkboxes, javascript runs 2 times through function if I click on text

I want to click on a checkbox and if I click this box it should run a function what gets an ID and saves it into an array or deletes it from the array if it still exists in the array.
That works, but if I click on the text beside the box the function runs twice. It first writes the ID into the array and then deletes it.
I hope you can help me so that I can click on the text and it just runs once
HTML
<label><input type="checkbox" value="XXX" >Active</label>
JavaScript/jQuery
function addOrRemoveBoxes(ID){
if(boxArr.indexOf(ID) != -1){
removeFromArray(ID)
}
else{
boxArr.push(ID);
}
}
$(".checkBoxes").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});

The problem is probably that your label and your input are picking the click. Try to bind it only to input. Like this:
$(".checkBoxes input").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});

Your HTML is structured bad. When your label is clicked it triggers a click event for the input so you have to separate the input form the label like: <input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label>. Also your jQuery makes no sense, why do you use unbind()? And we can't see what removeFromArray() does (we can guess but I prefer to see all code used or note that you use pseudo code).
I made this in 5 min: (hopes it helps you)
$(document).ready(function(){
window.boxArr = [];
$(document).on('click','[name=opt1]',function(){
addOrRemoveBoxes(this.value);
//show contents of boxArr
if(boxArr.length == 0){
$('#output').html('nothing :/');
}
else{
$('#output').html(boxArr.join(" -> "));
}
});
});
function addOrRemoveBoxes(ID){
var arrayIndex = boxArr.indexOf(ID);
if(arrayIndex > -1){
boxArr.splice(arrayIndex, 1);
}
else{
boxArr.push(ID);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Choose</h1>
<input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label> <br>
<input type="checkbox" name="opt1" id="opt1_2" value="DUT"> <label for="opt1_2">hallo</label> <br>
<input type="checkbox" name="opt1" id="opt1_3" value="SWE"> <label for="opt1_3">hej</label>
<br><br><h2>Array contains:</h2>
<div id="output">nothing :/</div>
Side note: with [name=opt1] we select all the elements with name="opt1" attribute.

Can you get this ng-model value from ng-click?

I have several checkboxes in angular.js and I am trying to get the ng-model value from the selected checkbox when clicked. Any suggestions?
<div class="checkbox">
<label>
<input type="checkbox" ng-model="hyp" value="false" ng-click="selection($event)">
Hypertension
</label>
</div>
$scope.selection = function($event){
console.log($event.target.value);
}
I hope that this is clear enough :/

you can directly put your model inside your function : ng-click="selection(hyp)"

You can get the value directly from the model. So you can do this:
$scope.hyp = false; // You can remove the value attribute
$scope.selection = function() {
console.log($scope.hyp);
};

How to rename a html form elements' Id attribute using Jquery?

I have a form which contains radio boxes.
<input type="radio" name="categoryid" id="category420" value="420" onclick="checkCategory();" > Category1
<input type="radio" name="categoryid" id="category1314" value="13,14" onclick="checkCategory();" >Category2
<input type="radio" name="categoryid" id="category594" value="594" onclick="checkCategory();" >Category3
When the radio elements value attribute is a comma separated list (13,14) I need the elements Id attribute to change.
In the example above, when the second category is selected then "CategoryIDs=13,14" should be passed to the action page not categoryid. But for the other two categories it should pass categoryid value.
I cannot edit the action page.
The question: How can I change the radio buttons Id attribute in JQuery?

Change the Id
Based on your requirement to have only one Id (categoryid/s) then you could change the Id using JQuery, before the form is submitted.
JSFiddle working example - http://jsfiddle.net/daTYY/
JQuery
$(function() {
$('input:radio[name=categoryid]').change(function() {
if ($(this).val().indexOf(",") >= 0) {
$(this).attr("id","newId");
}
});
});
Update a hidden input
Add a hidden input named categoryids. Then use JQuery to check if categoryid contains a comma and if it does populate categoryids with the value.
JSFiddle working example - http://jsfiddle.net/KVs79/
HTML
<input type="radio" name="categoryid" id="categoryid1" value="13,14" />Category2
<input type="radio" name="categoryid" id="categoryid2" value="404" />Category3
<input type="hidden" name="categoryids" id="categoryids" value="" />
JQuery
$(function() {
$('input:radio[name=categoryid]').change(function() {
if ($(this).val().indexOf(",") >= 0) {
$("#categoryids").val("13,14");
}else{
$("#categoryids").val("");
}
});
});

change hidden name attribute after radio button is clicked

I have the need to change the name=' ' attribute of a hidden input when one of the radio buttons in a group is selected.
<input type="hidden" name="OptionName2" value="Premium Bundle Addons">
<input type="hidden" name="" value="PremiumBundleAddon">
HBO & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-CIN-STAR"><br />
HBO & Cinemax & Showtime Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-SHO-CIN"><br />
HBO & Showtime & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="ALL-HBO-SHO-CIN-STAR">
The name="" needs to change to name="ADD" when one of these radio buttons is clicked.
Here is what I have tried but I really struggle with javascript. If anyone could help dumb it down for me that would be amazing!
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='opt2']").name() = "ADD";
});
});

As far as I see you don't have any hidden element with name opt2. Did you mean OptionName2?
Also, it's not correct the method you're using to change the name.
Try with this
$(":hidden[name='OptionName2']").attr("name", "ADD");

You can use simple javascript for this..
Just add id="changehid" to your hidden field.
Then you can use this function to change it:
function change() {
document.getElementById('changehid').name = "ADD";
}
Cheers
Evert
EDIT
Here's the code : http://jsfiddle.net/hCnyd/3/
I tested it with Safari Inspector, and it adds the name.
http://i.stack.imgur.com/aXjIE.png

Add class for children element depend on input value with jQuery

I have two fieldsets:
<fieldset class="checkable">
<span class="as_cp_checkbox"></span>
<input type="hidden" name="register_condition_01" id="register_condition_01" value="no">
<label for="register_condition_01">data</label>
</fieldset>
<fieldset class="checkable">
<span class="as_cp_checkbox"></span>
<input type="hidden" name="register_condition_02" id="register_condition_02" value="yes">
<label for="register_condition_02">data</label>
</fieldset>
Now: i need to add checked class to span.as_cp_checkbox if in my input value is yes. I try with that but every time this class is appending for first fieldset.
var checkable_fieldset = $('fieldset.checkable'),
checkable_fieldset_input = checkable_fieldset.find('input');
if (checkable_fieldset_input.val('yes')){
checkable_fieldset_input.parent(checkable_fieldset).prev().children('span').addClass('checked');
}
How can i add class for this prev span which input have yes value?

You can do this to add the class checked to all 'span.as_cp_checkbox' preceding an input whose value is "yes" :
$('input').filter(function(){return $(this).val()=="yes";})
.prev('span.as_cp_checkbox')
.addClass('checked');
Demonstration

checkable_fieldset_input.val('yes') sets the value to yes.
you need to do checkable_fieldset_input.val() == 'yes'

Your condition in the if statement should read
checkable_fieldset_input.val() == 'yes'
Right now you are assigning the value yes.

$('fieldset.checkable input').each(function(_, input){
if($(input).val() == 'yes')
{
$(input).siblings('span.as_cp_checkbox').addClass('checked');
}
});