hide divs when selecting new rado button using toggle - javascript

When I click on a radio button, if it's the last one in the list, it shows all of the hidden divs and doesn't close all open divs when I select another radio button. I know I'm close...but missing something.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().filter(":lt(" + this.value + ")").slideToggle("slow");
});
});
I thought I was taking care of it by having the "hide" at the beginning of the chain.
Html
<table cellpadding="0" cellspacing="0">
<tr>
<td width="25"><input type="radio" name="rNumber" value="1"></td>
<td width="25"><input type="radio" name="rNumber" value="2"></td>
<td width="25"><input type="radio" name="rNumber" value="3"></td>
</tr>
</table>
The divs are as follows:
<div id="grp1" class="groupNumber">Content Here</div>
<div id="grp2" class="groupNumber">Content Here</div>
<div id="grp3" class="groupNumber">Content Here</div>
What I want is the div for the corresponding radiobutton to be visible and to close any others that may be open.

That is because yo are using lt, you should use eq instead. try this.
using lt you are getting all the divs less that the index value to be shown so it is displaying that one and all previous ones. instead just use eq to get the div to be shown from the collection.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().eq((+this.value -1)).slideToggle("slow");//Probably Slide toggle probably doesn't make sense here as change event won't be triggered if you select the same option again.
});
});
Fiddle

Related

Unable to uncheck checkbox from chrome

I am trying to check/uncheck a checkbox/radiobutton both from the table cell as well as the actual checkbox /radiobutton
I have written this below code to select a checkbox/radiobutton from table cell
Please refer code pen for actuall code.
The code works fine for IE 11 browser but not in Chrome. If i select the table cell then the checkbox is selected but in chrome when i check on the actual check box nothing happens .
I think it is the checkbox internally calls the PropagateBelow method.
Check/Uncheck check box for chrome(Select on the CHECKBOX itself on TABLE CELL works fine)
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" />
</td>
</tr>
function PropagateBelow(tableCell) {
alert(tableCell);
var radioButtons = tableCell.getElementsByTagName('input');
for (var i = 0; i < radioButtons.length; i++) {
var radioButton = radioButtons[i];
if (radioButton != null && radioButton != undefined) {
if (radioButton.type == 'radio' || radioButton.type == 'checkbox') {
radioButton.click();
}
}
}
}
Not quite sure what the exact misbehavior is you're observing. What happens when I test your code is that when clicking the cell, PropagateBelow(this) is called which activates/deactivates the checkbox, based on its current state. When I click the checkbox, the checkbox is ticked, but then the click event bubbles up, again triggering PropagateBelow(this) which in turn unticks the checkbox again.
If you want to prevent that, you have to stop the propagation of the event when you click on the checkbox, like
<table border="1">
<tr>
<td onclick="PropagateBelow(this);" style="width:100px;">
<input type="checkbox" id="test" value="Test123" onclick="cancelPropagation();" />
</td>
</tr>
</table>
and then implement cancelPropagation() as follows
function cancelPropagation(ev){
var event = ev || window.event;
event.stopPropagation();
return false;
}
Here's your modified codepen project: http://codepen.io/anon/pen/MwEpxm
As mentioned, I'm not sure I got what you mean. If this doesn't help, let me know, so I'll delete my answer again :)
Instead of using a JavaScript function to propagate the click to all of the radio buttons, you can wrap the radio button in label which takes up the whole space of the table cell. Wrapping a radio button in a label will allow you to click anywhere in the label to toggle the radio button without having to use any JavaScript.
Please see example here: http://codepen.io/anon/pen/GJMWzb
<table border="1">
<tr>
<td style="width:100px;">
<label style="width:100%;height:100%;display:block;">
<input type="checkbox" id="test" value="Test123" />
</label>
</td>
</tr>
</table>
Funnily enough this does work fine for me in Chrome, but as a general rule it's better to set the checked property to true on checkboxes instead of trying to simulate clicks.
This could simply be done by replacing radioButton.click(); with radioButton.checked = true;, or if you wanted to toggle the checkbox radioButton.checked = !radioButton.checked;.
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

Toggle checkbox in Angular JS repeater table by clicking enclosing row

I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:
<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
<td><input type="checkbox" ng-model="t.isChecked"></td>
<td>{{t.firstName}} {{t.lastName}}</td>
</tr>
I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?
Try this:
ng-click="t.isChecked = !t.isChecked"
Exclamation sign should go in front of t.isChecked.
Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.
<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">
Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview

Jquery get different input hidden value to a link

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

how to traverse the element in <tr>

html:
<tr id="head-58">
<td style="width:150px;">
<input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
</td>
<td>
<input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
</td>
<td>
<input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
</td>
<td>
<input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
</td>
</tr>
Here onclicking the delete_person class,i want to show the hidden button with class delete_icon.Since class delete_icon can have more than one,i need to show the hidden button form clicked element.I tried with $this.closest('tr').find(".delete_icon").toggle(); which is not working.
Use:
$this.parents('tr').find(".delete_icon").toggle();
Your delete button is not a child of tr. Move it into tr, or use:
$(this).closest('tr').next('.delete_icon')
There is no $this variable unless you create it yourself. this refers to the target of the event, so use it in the jQuery function to create a jQuery object containing it:
$(this).closest('tr').find(".delete_icon").toggle();
However, you also need to move the button inside the table row for that to work. Now it looks like it's inside the table but outside any table cell, which is invalid HTML. (Some browsers may put it inside some table cell, other may move it outside the table entirely. The result is unpredictable, so unless you move the button inside a cell, it's not possible to write code that accesses it.)
Since the button is after the <tr>...</tr>
Use:
$(this).parent().next().toggle()

jQuery Click Function not Working?

I have the following jQuery Function on a site:
$('#CAT_Custom_381715_0').click(function () {
$(".grow").fadeIn("slow");
});
What I am aiming for is when a checkbox is clicked it will then show other parts of the form.
The HTML code is below:
<tr>
<td><label>Have You Grown This Plant?</label><br />
<input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>
<tr class="grow"> <!-- FORM CODE --> </tr>
<tr class="grow"> <!-- FORM CODE --> </tr>
CSS for .grow
.grow{
display:none;
}
I assume has something to do with the table causing the issue. No errors are thrown. I originally had a div wrapping the code but Firefox would remove the div. Not sure if that was Firefox or my CMS.
The problem is the <tr> with the class of grow does not show when the checkbox is clicked.
How do I get jQuery to work properly.
I switched the click behavior to on and it is toggling. However, I also recommend you read this post and make sure to check to see if your checkbox is actually checked, and not just clicked on.
Setting "checked" for a checkbox with jQuery?
Here is the Codepen link: http://cdpn.io/jztKb
HTML
<table>
<tr>
<td><label>Have You Grown This Plant?</label><br />
<input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>
<tr class="grow"><td>Hi</td></tr>
<tr class="grow"><td>Hi</td></tr>
</table>
CSS
.grow {
display: none;
}
jQuery
$('#CAT_Custom_381715_0').on('click', function() {
$(".grow").fadeToggle("slow");
});

Categories