There is a list of check boxes in a table and i have assigned a unique key to value attribute of each checkbox. What should be the selector in YUI3 so that i can get a single checkbox object if I know its value.
Following is the sample of the structure:
<table id="mytable">
<tr>
<td><input type="checkbox" value="1" /></td><td>Apple store</td>
<td><input type="checkbox" value="2" /></td><td>Play store</td>
</tr>
</table>
Code required in the following format:
Y.one("#mytable input[type=checkbox,value=1]");
This must return the checkbox object for Apple Store but its not working.. any idea?
You need an attribute selector for each attribute you are trying to match. You can't combine the name/value pairs in a single attribute selector.
[type=checkbox][value=1]
Related
I,m developing a web app(jsp) that extracts some data from a .doc file. Headings from an uploaded document is extracted and listed in a table as below.
Generated output on upload-screenshot
I have added a check-box for each row. Next what I want to do is save the check-box checked rows into an xml. I know how to write xml but how to do it only with the checked rows on form submit? My question summery is, How can I pass those checked rows from table on form submit as request parameters. Thanks in advance.
Creating checkbox array by keeping same name for all checkboxes will give you what you want.
In java, after submitting your form you read it in your servlet as 'request.getParameterValues("checkboxname")'. you will get checked checkboxes from the array returned.
HTML
<table class="table">
<tr value="1" class="side-link">
<td>one</td>
<td>two</td>
</tr>
<tr value="2" class="side-link">
<td>one</td>
<td>two</td>
</tr>
</table>
JavaScript
$(".table").on('click','tr',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
Demo
I have code in which a gridview in asp.net webforms spits out 3 checkboxes of which I would like to have Jquery easily traverse through the ID's and ONLY allow 1 checkbox per row to be checked.
They will Always have the same name just that the ending numbers will increase thus row 1 might not have a number, but then ending in 1 then ending in 2 , then they all end of 3 etc...
I could do this regretfully long way of writing a ton of javascript/jquery in which I check for each specific checkbox and those that end in 1, those cannot have any others ending with 1 to be checked, they have to be unchecked.
I was thinking about regex in which I check the beginning of the ID and then the end of the ID and making sense that per ID having "chkCtrl" AND ending with a unique number like "1" that the specific box being checked will uncheck the other "chkCtrl" ending in 1 . Thus Out1 , Y1 , N1
I'm sure that there IS a fast way to do this I just cannot seem to find an example of it.
Example
<table>
<tr>
<td>Out</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
This can easily be done by writing a couple of lines of jquery. For example see the code below.
$('input:checkbox').click(function(){
$(this).closest('tr').find('input:checkbox').removeProp('checked');
$(this).prop('checked',true);
});
jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/
Edit
As Tom Stickel has mentioned in the comments using removeProp is a bad idea. It may not work in jquery 2.*. Refer Tom Stickel's answer for a better way to do this.
The selected answer will work in older jquery, if you changed that selected answer jquery version to a new version the checkboxes do not work.
.removeProp is bad idea https://api.jquery.com/removeProp/
Taleeb was very close however, I would say to edit that one line.
$('input:checkbox').click(function () {
$(this).closest('tr').find('input:checkbox').prop('checked', false);
$(this).prop('checked', true);
});
I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle
I am trying to create a form part of which is a table that loops over a list of objects and for each object allows the user to check/uncheck attributes. The rest of the form works fine but I am having trouble setting the ng-model attribute on the checkboxes.
Here's what I have:
<table>
<thead>
<tr>
<td>Objects and Fields</td>
<td>Createable</td>
<td>Deleteable</td>
<td>Readable</td>
<td>Updateable</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="object in myAppObjects">
<td>
{{object.name}} {{object.id}}
<input type="checkbox" name="app_access_{{object.id}}" ng-model="app_access" value="false">
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
At first I tried setting the ng-model="app_access_{{object.id}}" so that I would have a unique ng-model for each cell. This caused the table row to be repeated several dozen times. Each of those empty cells will also have a check box. There will be five check boxes for each object and several objects in the form at a given time. I'll need to be able to access each check box (or better yet a list of the checked ones) in the controller.
Since ngRepeat creates a new (child) scope for each item, creating new ng-models (that are tied to those new scopes) for the items will not work because those models/data will only be accessible inside those inner scopes. We can't write a controller function to access those inner/child scopes. It is better to reference something in myAppObjects for the models (like #Max suggests in his second example).
If myAppObjects looks something like this:
$scope.myAppObjects = [
{id: 1, cb1: true, cb2: false, cb3: true, cb4: true, cb5: false },
{id: 2, cb1: false, cb2: false, cb3: true, cb4: false, cb5: true },
You could write your ng-repeat like this:
<tr ng-repeat="appObj in myAppObjects">
<td>{{appObj.id}}
<input type="checkbox" ng-model="appObj.cb1"></td>
<td><input type="checkbox" ng-model="appObj.cb2"></td>
<td><input type="checkbox" ng-model="appObj.cb3"></td>
<td><input type="checkbox" ng-model="appObj.cb4"></td>
<td><input type="checkbox" ng-model="appObj.cb5"></td>
</tr>
Working fiddle: http://jsfiddle.net/mrajcok/AvGKj/
Bottom line: we need to have the checkbox models defined in/on the parent scope (in my fiddle, MyCtrl's $scope), and not in/on the ngRepeat inner/child scopes.
Generally, if you are iterating over a collection using ng-repeat then the the items that you display and edit are the individual members of the collection. So if you have an array of strings that are being edited by the ng-repeat you would do
<div ng-repeat="item in list">
<input ng-model="item" />
</div>
Or if is a list of objects you are iterating over you would do
<div ng-repeat="obj in list">
<input ng-model="obj.item" />
</div>
I want to disable a set of checkbox based on selection of one textbox and enable the disabled ones if the checkbox is unchecked.
In the code below. If someone checks the checkbox for project cost under change this parameter then checkbox for project cost under Generate simulated value for this param
should be disabled and all the checkboxes under change this parameter should be disabled except for checked one. Similarly this should be done each parameter like Project cost,avg hours,Project completion date, hourly rate etc.
One way i could think of was of on the click function disable each checkbox by the id. Is there a better way of doing it?
<table>
<tr>
<td></td>
<td></td>
<td>Change this parameter</td>
<td>Generate simulated value for this param</td>
</tr>
<tr>
<td>Project cost</td>
<td><input type ="text" id ="pc"/></td>
<td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>
</tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>
</tr>
<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>
</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>
</tr>
</table>
Thanks
Prady
If you use a naming convention for either your id or name attributes, you can probably use the various attribute substring selectors to select the checkboxes. For instance:
$(":checkbox[name^=foo]").attr("disabled", true);
...will disable all checkboxes whose name starts with "foo" (so, "foo1", "foo2", whatever). Or of course, you could use a class, etc.
You might be able to make that a bit more efficient if you can contain it to the table:
$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);
For instance, if you added a "checkboxTable" id to the table:
$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);
More about attribute selectors:
jQuery docs
CSS3 docs (jQuery supports nearly all of CSS3, and then some)
Alternately, I can't quite tell from your question (you seem to mention checkboxes that aren't shown in the given markup), but if all of the checkboxes you want to act on are within the same table row as the one that was clicked, you can use traversal within the row to find the checkboxes to enable/disable.
For example, this change handler will disable all other checkboxes on the same table row as the one that fired the event:
$("selector_for_checkboxes").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox").not($this).attr("disabled", this.checked);
});
Live copy
This one will do the same thing, but skipping any checkboxes that are already checked:
$(":checkbox").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);
});
Live copy
Ok, so if #chkBox is checked then you want to disable all checkboxes with the class "change" and the one for "sim" on the same row.
$('#chkBox').click(function(){
var paramChangeBoxes = $('input:checkbox.change');
if ($(this).is(':checked')) {
paramChangeBoxes.attr('disabled', 'disabled');
$('#chkBox1').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#chkBox1').removeAttr('disabled');
}
});