We Keep Coding

Check multiple Checkbox jQuery

I have this code to get back a json string:
$.getJSON("<?php echo BASE_URL; ?>/editTask.php?ID="+tid,function(result){
$.each(result.staff, function() {
$("#checkbox[value=" + this + "]").prop('checked');
});
});
The json looks like this
{"staff":[13,17,15]}
I have a PHP snippet like this
<div id="checkbox" class="checkbox" style="max-height:150px;overflow:auto;">
<?php
for ($i = 0; $i < count($user_list); ++$i) {
echo '<label>'
.'<input type="checkbox" name="tasksUser[]"
value="'.$user_list[$i]['uid'].'">'
.$user_list[$i]['surname'].', '.$user_list[$i]['forename']
.'</label><br />';
}
?>
</div>
I want that every checkbox that has the value that is in result.staff be checked. But I think I have an error in my each part. But in the Firefox console is no error showing.
Could you help me?

Yes there is an issue in your $.each function.
$.each(result.staff,
function() {
$("#checkbox[value=" + this + "]").prop('checked');
^
Here is the issue.
});
});
As you don't have any id or class associated with element you can access it using element name/+type
You must replace your code with
$("input[type='checkbox'][value=" + this + "]").prop("checked", true);
Here I am accessing all checkboxes with values available and setting checked as true.

You're using this selector to look for checkboxes:
$("#checkbox[value...]")
However, the # symbol in a selector looks for an element with that ID.
The checkboxes in your PHP loop do not have a specified ID or class, so you could select them with:
#(":checkbox[value...]")

onchange handler with quoted text

I want to use some inline javascript/jquery in an on change handler of a radio button:
<input
name="Operator"
type="radio"
value="#Model.Operator"
checked="true"
onChange="#radioOnChange"
/>
The test version of radioChange looks like this:
#{
const string radioOnChange =
"var name = $(this).attr('name');" +
"alert(name);" +
"var selector = "span[name='" + name + "']"; "+
"alert(selector);
}
For the "var selector = "span['+name+']"" part I tried a zillion different variations using "\" the html "&" escapes, etc. But right one eludes me.

I guess the right one should be: "var selector = "span[name='" + name + "']"; ", which will produce: var selector = "span[name='selectorName']";
I also recommend using \" instead of " - I guess it's all the same but more readable (maybe someone should correct me if I'm wrong?)

Found out that the trick was using a McvHtmlString like so:
<input
name="Operator"
type="radio"
value="#Model.Operator"
checked="true"
onChange="#MvcHtmlString.Create(radioOnChange)"
/>

Use jQuery to select all labels of radio button group

I am trying to write a function that will be called if any of the labels for a group of radio buttons are clicked. So I'd like a way to refer to all the labels of the radio button group.
From another thread (this one) I read that I could do
$('#[radio_name] label').click(function(){
...
});
where [radio_name] is the name of the group of radio buttons. In fact, I'm just trying to implement the code in the referenced thread. Unfortunately it doesn't work for me, don't know why.
Some other threads suggested you could select a specific label with $('label[for=[radio_option_id]]'), where [radio_option_id] is the id of the radio button to which the label applies. However, that only works to select a single label. I need to select all the labels in the group, which have different ids.
EDIT: here is the more complete context as requested below.
var content = "<form id='question_form' name='question_form' action=''>" + page.text;
content += "<div id='radio_options'>";
for ( var i=0; i<page.answers.length; i++ ) {
content += "<input type='radio' name='radio_option' id='radio_option_" + i.toString() + "' value='" + i.toString() + "'><label for='radio_option_" + i.toString() + "'>" + page.answers[i] + "</label><br>";
}
content += "</div>";
content += "<p><input type='submit' id='submit_button' name='submit_button' value='Submit'></p></form>";
display_loc.html( content );

Use the ATTR contains selector
$('label[for*="radio"]').click(function(){
...
});
This would work for and label that contains radio within the for attribute
Eq.
<input type="radio" name="emotion" id="radio_sad" />
<label for="radio_sad">Sad</label>
<input type="radio" name="emotion" id="radio_happy" />
<label for="radio_happy">Happy</label>
Update
For you html code you can do the following.
$('#radio_options label').click(function(){
});

It sounds to me that you just need to apply a class to your different labels and access them that way. That way you can group the labels by class.
$('label.className').click(function(){
...
});

how to delete a value between <input> tags?

I'm creating checkboxes using JQuery as following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
Then later it is removed whenever the user checks the box in:
if (this.checked) {
$(this).remove();
}
However, The input box is deleted, but the number (id) stays on the page, along the <br/> Tag, so I can see the #i there on the HTML Page.
I would like to remove them as well.
So, to in order to make my question as complete as possible, here is how the HTML is laid:
<input id="1" type="checkbox">
1
<br>
Could someone please give me a clue how to remove #i and <br/> from the page?
Thanks

as stated by other answers - input don't have closing tags
You will still need to remove all id and <br />. You can find those with .next() function in jquery. You should put your id in <label> or <span>.
Then. for example:
$(this).next('label').remove();
$(this).next('br').remove();
$(this).remove();
Code can be written shorter but it's for you to see how it works.

The text in <input> text boxes is not set with a textnode (like for textareas), but with the value attribute. (Sorry for the confusion)
Yet, you want to have a checkbox. Best, create a <label> for it, instead of a text node plus a <br /> (which is not handleable with jQuery):
<div class="inputcell">
<input type="checkbox" id="check5">
<label for="check5">5</label>
</div>
With this DOM, you can easily remove the whole box by $("#check5").parent().remove(). Note that single numbers are no valid element ids.

that's because input tags don't have closing tags and remove ignores everything after the >, change this:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
to:
$('<input type="checkbox" ' + 'id=' + (i+1) + 'value="' + (i+1) +'"><label>'+ (i+1) +'</label>')
$(this).next('label').andSelf().remove();

input tags don't have closing tag, to create a checkbox you just need the following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>');
and if you want also to use a label for that checkbox, create appropriate label or any other element, because you can't put closign tag for input and a text between them

add templated div to page multiple times with different ids

I am using ASP.Net MVC along with Jquery to create a page which contains a contact details section which will allow the user to enter different contact details:
<div id='ContactDetails'>
<div class='ContactDetailsEntry'>
<select id="venue_ContactLink_ContactDatas[0]_Type" name="venue.ContactLink.ContactDatas[0].Type">
<option>Email</option>
<option>Phone</option>
<option>Fax</option>
</select>
<input id="venue_ContactLink_ContactDatas[0]_Data" name="venue.ContactLink.ContactDatas[0].Data" type="text" value="" />
</div>
</div>
<p>
<input type="submit" name="SubmitButton" value="AddContact" id='addContact' />
</p>
Pressing the button is supposed to add a templated version of the ContactDetailsEntry classed div to the page. However I also need to ensure that the index of each id is incremented.
I have managed to do this with the following function which is triggered on the click of the button:
function addContactDetails() {
var len = $('#ContactDetails').length;
var content = "<div class='ContactDetailsEntry'>";
content += "<select id='venue_ContactLink_ContactDatas[" + len + "]_Type' name='venue.ContactLink.ContactDatas[" + len + "].Type'><option>Email</option>";
content += "<option>Phone</option>";
content += "<option>Fax</option>";
content += "</select>";
content += "<input id='venue_ContactLink_ContactDatas[" + len + "]_Data' name='venue.ContactLink.ContactDatas[" + len + "].Data' type='text' value='' />";
content += "</div>";
$('#ContactDetails').append(content);
}
This works fine, however if I change the html, I need to change it in two places.
I have considered using clone() to do this but have three problems:
EDIT: I have found answers to questions as shown below:
(is a general problem which I cannot find an answer to) how do I create a selector for the ids which include angled brackets, since jquery uses these for a attribute selector.
EDIT: Answer use \ to escape the brackets i.e. $('#id\\[0\\]')
how do I change the ids within the tree.
EDIT: I have created a function as follows:
function updateAttributes(clone, count) {
var f = clone.find('*').andSelf();
f.each(function (i) {
var s = $(this).attr("id");
if (s != null && s != "") {
s = s.replace(/([^\[]+)\[0\]/, "$1[" + count + "]");
$(this).attr("id", s);
}
});
This appears to work when called with the cloned set and the count of existing versions of that set. It is not ideal as I need to perform the same for name and for attributes. I shall continue to work on this and add an answer when I have one. I'd appreciate any further comments on how I might improve this to be generic for all tags and attributes which asp.net MVC might create.
how do I clone from a template i.e. not from an active fieldset which has data already entered, or return fields to their default values on the cloned set.

You could just name the input field the same for all entries, make the select an input combo and give that a consistent name, so revising your code:
<div id='ContactDetails'>
<div class='ContactDetailsEntry'>
<select id="venue_ContactLink_ContactDatas_Type" name="venue_ContactLink_ContactDatas_Type"><option>Email</option>
<option>Phone</option>
<option>Fax</option>
</select>
<input id="venue_ContactLink_ContactDatas_Data" name="venue_ContactLink_ContactDatas_Data" type="text" value="" />
</div>
</div>
<p>
<input type="submit" name="SubmitButton" value="AddContact" id='addContact'/>
</p>
I'd probably use the Javascript to create the first entry on page ready and then there's only 1 place to revise the HTML.
When you submit, you get two arrays name "venue_ContactLink_ContactDatas_Type" and "venue_ContactLink_ContactDatas_Data" with matching indicies for the contact pairs, i.e.
venue_ContactLink_ContactDatas_Type[0], venue_ContactLink_ContactDatas_Data[0]
venue_ContactLink_ContactDatas_Type[1], venue_ContactLink_ContactDatas_Data[1]
...
venue_ContactLink_ContactDatas_Type[*n*], venue_ContactLink_ContactDatas_Data[*n*]
Hope that's clear.

So, I have a solution which works in my case, but would need some adjustment if other element types are included, or if other attributes are set by with an index included.
I'll answer my questions in turn:
To select an element which includes square brackets in it's attributes escape the square brackets using double back slashes as follows: var clone = $("#contactFields\[0\]").clone();
& 3. Changing the ids in the tree I have implemented with the following function, where clone is the variable clone (in 1) and count is the count of cloned statements.
function updateAttributes(clone, count) {
var attribute = ['id', 'for', 'name'];
var f = clone.find('*').andSelf();
f.each(function(i){
var tag = $(this);
$.each(attribute, function(i, val){
var s = tag.attr(val);
if (s!=null&& s!="")
{
s = s.replace(/([^\[]+)\[0\]/, "$1["+count+"]");
tag.attr(val, s);
}
});
if ($(this)[0].nodeName == 'SELECT')
{ $(this).val(0);}
else
{
$(this).val("");
}
});
}
This may not be the most efficient way or the best, but it does work in my cases I have used it in. The attributes array could be extended if required, and further elements would need to be included in the defaulting action at the end, e.g. for checkboxes.