Develop Reference

how to hide field in same row as field its dependent on

I'm pretty novice at jquery but I have a table with a field in each row that is dependent on another field (checkbox) in the row. Since its in a table I need to handle them in bulk. I don't think I'm using next() correctly but I'm trying to grab the next .subnet_mask since it will be the one in the same row as hide it. I'll also have to update it once I get that far so that it handles hiding and showing if the checkbox is checked or not.
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$('.subnet_mask').next().hide();
});
});
});
Any help is appreciated!
EDIT: ok ok :) well the page is actually written in VisualForce (for salesforce). For simplicty sake lets say its just a form wrapped around a table (up to 20 rows representing different records) displaying a checkbox field with the class .dhcp and a field after it called .subnet_mask that should be shown/hidden based on the checkbox. Is that helpful?

I'd rather do this
$('.dhcp').on('click', function() {
$(this).nextAll('.subnet_mask').toggle();
});
Then you show/hide the next .submask (assuming one .submask per <tr>) each time you click the .dhcp

I'd suggest the following, though this suggestion may well change once I see the relevant HTML:
$('.dhcp').click(
function(){
$(this).closest('tr').find('.subnet_mask').hide();
});
This assumes that there will be only one .subnet_mask element per row (otherwise this will hide all of them) in response to the click event. You mention that this depends upon a checkbox, so perhaps the following would be better, using the change() method:
$('.dhcp').change(
function(){
var that = $(this);
if (that.is(':checked')) {
that.closest('tr').find('.subnet_mask').hide();
}
else {
that.closest('tr').find('.subnet_mask').show();
}
});
References:
change().
:checked selector.
click().
closest().
find().
hide().
is().
show().

You're using next incorrectly. It should be more like this:
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$(this).next('.subnet_mask').hide();
});
});
});
For this case, I'm assuming that .dhcp and .subnet_mask are indeed siblings, wit the latter coming immediately after the former. Otherwise, .nextAll() can be substituted for .next()
Edited as per point below.

Jquery plugin bind change event

I just created a selectbox plugin.It is very simple and I am trying to modify it.
Actually what it is doing is to hide the select and add some ul,li after that select.
Say that I have these options available
<select id="test">
<option>1</option>
<option>2</option>
</select>
Now I can do
$("#test").selectBox(); //to make it my selectBox
I have setter and getter options
$("#test").selectBox("changeValue",["changed option",index]);
On my plugin I am using methods ..
var methods = {
init :function(options){},
changeValue:function(value){
//some code to change the value ...
}
};
I can change the value ,but how can I catch the change event?
change means that a change in select or ul,li
What I really need is
$("#test").selectBox(); //initialise
$("#test").change(function(){ //attach change event
//my codes.....
});
or
$("#test").selectBox({
onChange : function(){
console.log("changed....");
}
});
Hope that the question is clear now.
Thank you.
EDIT : HERE IS THE FIDDLE link http://jsfiddle.net/jitheshkt/rBjqq/3/
Please note that i am not a expert on this and just trying to make it.
*Edit : i wrote events inside the each function ,so i think that that will be the problem. i changed it and working well *

Try this...
$("#test").on('change',function(){
// Write your code here.
});
For Older version of jQuery Use this
$("#test").change(function() {
console.log('HI');
});
This should work as it is.

I suppose you are setting the value using val() method. The change event doesn't trigger if you are changing the value using jQuery API/JavaScript, so you have to trigger it manually, like this:
$('#test').change()
or
$('#test').trigger('change');
I hope that would do the trick!!

You can depend on the original select box change rather than your customized select box.
When you select an li item, you update the corresponding value in original selectbox so that change get's fired..

jQuery: How to reset multiple dropdowns after they have been cloned?

At the moment my code clones 3 dropdowns everytime you click the add button.
I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I was just wondering how to reset all 3 dropdowns?
It is easiest to see in this JSFiddle:
http://jsfiddle.net/jydqK/7/
So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.
Any help greatly appreciated.

You can use removeAttr to remove selected attribute and then fire a change() event.
In your case:
dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');
Modified example: http://jsfiddle.net/ZF3mc/2/

If I understood your question, you want the duplicated row of selects to reset their values.
In this case you can just remove this:
dropdownclone.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});
and replace it with:
dropdownclone.find('option').attr('selected', false);

Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:
clone.find('select').each(function() {
$(this).find('option').each(function() {
$(this).removeAttr('selected');
});
});
Or better yet, find only the selected option tags using :selected filter before removing.

jQuery onclick change parent background

I downloaded the script from emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html and made a few modifications, as the source wasn't working as required (When submitting the form, all of the values were being sent to the php handler, not just the checked ones).
My working example is in this Demo.
My issue is this: how can I check a group of <lis> so that I could have a 'Select All' button?

You can do it like this:
$("#fcbklist li input:checkbox").attr("checked", true);
Or if you want a toggle on that select all box that checks when it's checked, unchecks all when it's not, do this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked", this.checked);
});
To get the effect you want with the plugin though, you'll need to fire a click on the parent as well, like this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked",this.checked).parent().click();
}); ​
You can try a working sample here.

Change bg on radio deselect

This is just an add on to my last question. Once I deselect the radio button I need to return the background color to its original state. So the solution we came up with is:
$(document).ready(function(){
$('input:radio').change(function(){
$(this).closest('div').toggleClass('highlight');
});
});
Now I need to remove the highlight class when the radio button is deselected - any ideas?

Try this, group your radios using the name attribute and the following js should work
Demo
$('input:radio').change(function(){
$('div.highlight').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});

yes, I agree with redsquare, you can see this my code demo on jsfiddle, with the div onclick select the radio.
$('table div').click(function() {
$(this).find('input:radio').prop('checked', true);
$('div.highlight_row').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
you can see the full code here, but the change is on tr class, not the div class :
JsFiddle Code Sample