Develop Reference

Smarty / Dojo checkbox onCheck uncheck other checkbox

I am using Dojo labels and checkboxes in one of my app inside smarty file. I want to add a certain behavior to uncheck a checkbox, if any other checkbox is checked. I also check if that checkbox is originally checked, it will uncheck the same. (I do not want to use radio button)
Here is my code for one CheckBox:
<input id="form.cs"
data-dojo-type='dijit.form.CheckBox'
type="checkbox"
data-dojo-props="value:'true', type:'checkbox', name:'cs', style:'vertical-align: top'"
onChange="if(dijit.byId('form.cs"').checked)
dijit.byId('form.cs"').set('checked', false);
else
dijit.byId(' form.nl"').set('checked', false);"
/>
The problem with code is when i add curly braces, this is not rendered by smarty engine and throws error.
For example :
onChange="if(dijit.byId('form.cs"').checked) {
dijit.byId('form.cs"').set('checked', false); }
else {
dijit.byId(' form.nl"').set('checked', false);"}
The above code snippet will create a breakdown in the smarty.

I recommend writing your event handler in JavaScript. If you're going to write all your event handlers as attributes you're going to have a lot of problems like code validation, ... .
You could write a loop that actually loops over all checkboxes, setting the value to the opposite of the changed value (so if one checkbox becomes true, the other ones must become false).
To do this you could write a simple function like this:
var toggleCheckboxes = function(myNode, value) {
query("input[type=checkbox]").forEach(function(node) {
if (node !== myNode) {
registry.getEnclosingWidget(node).set("value", !value, false);
}
});
};
The dojo/query module allows you to get a list of all nodes matching the given selector. With the dijit/registry module you can retrieve the actual widget behind the DOM node and then you just set the value using:
registry.getEnclosingWidget(node).set("value", !value, false);
The third parameter (set to false) is actually very important. This parameter will prevent further event invocations. If you don't put that parameter there it will actually trigger another onChange, causing an infinite loop.
Now the only thing you need to do is bind an onChange event handler to each checkbox that calls this function, you can also to that with the dojo/query and dijit/registry module, for example:
query("input[type=checkbox]").forEach(function(node) {
registry.getEnclosingWidget(node).on("change", function(value) {
toggleCheckboxes(node, value);
});
});
A complete example can be found on JSFiddle.
But I still recommend using a radiobutton. I think you can actually say this is a bad UI design, a checkbox and a radiobutton have different goals, use them for what they're meant to.

Access hidden checkboxes with javascript and jQuery

I have a datatable, where each row has a checkbox. I'm trying to add select-all functionality to this set of checkboxes, for which I created the following function:
function selectAll() {
$(':checkbox').each(function() {
this.checked = true;
});
}
This works to select all checkboxes which are currently visible, however, the checkboxes on other pages of the datatable are not selected. I know that there is an issue with these checkboxes in general, since to submit the form and include those checkboxes, I had to add the following function:
$('form').submit(function() {
oTable1 = $('#mytable').dataTable();
$(oTable1.fnGetHiddenNodes()).find('input:checked').appendTo(this);
});
So I suspect that in order to check these checkboxes, I will somehow have to append them to the DOM, at least temporarily, check them off, and then remove them from the DOM. Or is there something simpler that I can do?

I managed to get this work using the following:
oTable1 = $('#mytable').dataTable();
$(oTable1.fnGetNodes()).find(':checkbox').attr('checked',true);
As an alternative, you can also use
$(oTable1.fnGetFilteredNodes()).find(':checkbox').attr('checked',true);
which will apply the "select-all" only to the rows that match the current filter.

Hide or Show Drop down box pending on Radio Button - jQuery

not sure what is wrong with this jquery code: http://jsfiddle.net/aCABM/
I want to to grey out the dropdown menu when 'yes' is selected. When no is selected it can be selected if the user so wishes.

Select the elements by radio button name there is no need to select them individually by there ids and use prop instead of attr since you are manipulating its disabled property. Try this.
$(function(){
$("input[name='discount']").click(function() {
$("#discountselection").prop("disabled", this.value == 'Yes');
});
});
Demo
In your fiddle there were few issues.
Missed to include jQuery library
You cannot just begin your markup with td, it should be enclosed with table and tr element.
In the Js window you just have to put your js, no need to have script tags.

check updated code here
http://jsfiddle.net/ylokesh/aCABM/1/

Update code here:
http://jsfiddle.net/aCABM/6/enter link description here
You need to wrap your code in a $(document).ready() function, like so:
$(document).ready(function() {
$("#Yes").click(function() {
$("#discountselection").attr("disabled", false);
//$("#discountselection").show(); //To Show the dropdown
});
$("#No").click(function() {
$("#discountselection").attr("disabled", true);
//$("#discountselection").hide();//To hide the dropdown
});
})
Also, you didn't setup jsFiddle correctly, it required jQuery library and (document)ready()

You can use this :
$("#Yes").click(function() {
$("#discountselection").show();
});
$("#No").click(function() {
$("#discountselection").hide();
});
and remove the disable="disable".
Good-Luck !

Jquery checkboxes within containing table selector question

My current code:
<script type="text/javascript">
function checkAll(checked) {
$("input[type='checkbox']:not([disabled='disabled'])").attr('checked', checked);
}
</script>
<input type="checkbox" id="cbxSelectAll" onclick="checkAll(this.checked);" />
The short version:
How do I modify the function call and method above to check all checkboxes inside a table containing the checxbox form element.
The long version:
I am creating a WebUserControl containing a grid view in asp.net that is going to have a delete option. I would like the delete to be a series of checkboxes with one a box in the header to select all of them. What this amounts to for non ASP.NET people is a table with a header row that has a checkbox and every row also has a checxbox.
I have used the above code to check all boxes on the entire page. That won't work here though because I want to have multiple of these on the page at once each working independently. I know I could use a selector to select all the boxes if I ID'd the table but that would require some coding to name the table uniquely and then put that name in the script block.
Really what I would like is to modify the script above to check all checkboxes in the containing table of the "select all" box. The table containing the checkbox could be nested within others but I don't see any being nested within it, or if there are and the nested table also contains checxboxes I don't care if they also get selected.
Thanks for your help.

First, don't mix your HTML and your Javascript. Use event handler binding instead.
Second, use closest to get the nearest ancestor element of a particular type:
$(document).ready(function(){
$('#cbxSelectAll').click(function() {
$(this)
.closest('table') // get the parent table element
.find("input:checkbox:enabled") // find children that match the selector
.attr('checked', this.checked); // set their checked value
});
});

Change your inline attribute to this:
<input type="checkbox" id="cbxSelectAll" onclick="checkAll.call(this);" />
And your checkAll() to this:
function checkAll() {
$(this).closest('table').find("input:checkbox:enabled").attr('checked', this.checked);
}
Using .call(), it is called from the context of the element clicked.
Then the jQuery gets the closest()(docs) <table> and finds the inputs using the checkbox-selector(docs) and the enabled-selector(docs) .
Then when using the attr()(docs) method, you can use this.checked to set the checkboxes to the current state of the one checked.

You can find the table containing the select all using .closest
function checkAll(checked) {
var $table = $(this).closest('table');
$table.find("input[type='checkbox']:not([disabled='disabled'])")
.attr('checked', checked);
}
If there might be several nested tables it's often easiest to specify the one you want with a class, e.g. $(this).closest('table.tableOfCheckboxes'); where you add class tableOfCheckboxes to the table you want to find.

Question regarding checking the state of a checkbox class

I'll try and make this question simple. Can I assign a class to a series of different checkboxes, and use Jquery to do something when any one of those checkboxes is checked? Searching around on the internet I have found documentation on grabbing the name: $('input[name=foo]').is(':checked') but when I swap out the name attribute for the class attr, it won't work! How can I set an event to occur if any of the checkboxes with this certain class is checked? Please help me out! Thanks

Use hasClass to test whether or not a particular element has been assigned a certain class e.g.:
$(document).ready(function() {
$("input[name=something]:checkbox").click(function() {
if($(this).is(":checked") && $(this).hasClass("foo")) {
// the checkbox has been checked and has a class of foo
}
});
});
Try a demo here.

You can get the status of all the checkbox at a single go by putting same name to all the checkboxes.