Develop Reference

Create textbox dynamically in td next to specified td in html table using jquery

Hello all,
I need to create textbox dynamically(depending on condition), when user clicks on employee it should get added next to employee, if user clicks on another element, it should get added next to another element
I have tried following, but I am not able to get exact td and function by which i can append textbox to it.
$("#emlpyeetd").after('<s:textfield id="employeeVal" name="employeeView.policyOrQuoteNumber" maxlength="15" style="width: 200px;" class="hideForAnotherField" theme="simple"></s:textfield>');
<td width="25%">
employee
</td>
<td id="policytd" class= "anotherfield" width="25%"></td>

Try something like this, it will remove 1st textbox when you click on 2nd option.
Jquery code
<script>
$(document).ready(function(){
$(".radio_action").click(function(){
if($(this).val() == "E" ){
$("#other_text").html("");
$("#emp_text").html("<input type='text' >");
}
else if($(this).val() == "A" ) {
$("#emp_text").html("");
$("#other_text").html("<input type='text' >");
}
})
});
</script>
HTML code
<table>
<tr>
<td><input type="radio" name="radio_type" value="E" class="radio_action" /> Employee</td>
<td id="emp_text"></td>
</tr>
<tr>
<td><input type="radio" name="radio_type" value="A" class="radio_action" /> Another Element</td>
<td id="other_text"></td>
</tr>
</table>

Html
<div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val1</div>
<div class="editor-wrapper"></div>
</div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val2</div>
<div class="editor-wrapper"></div>
</div>
</div>
JS
$(document).ready(function() {
$('input[name="somename"]').click(function() {
$(this.closest('.container')).find('.editor-wrapper').html($('<input>'))
});
});
jsfiddle

How to fetch the value of checkbox of the triggered button only in jquery?

<tr>
<td>Category 1</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
<tr>
<td>Category 2</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
The table is dynamically created with jquery. So, what I want is when I click one of the save button, I want to fetch the checked data from the checkbox of that only consisting that clicked button, not from the other checkboxes.

use each function of Jquery to get all the checked boxes corresponding to the save button like below
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked").each(function(){
alert($(this).val());
});
})

Try this, i am using this code to display values but you can use it in for save....
$(document).ready(function() {
$("button").click(function(){
var chkvalue = [];
$.each($("input[name='items']:checked"), function(){
chkvalue.push($(this).val());
});
alert("My chkvalues are: " + chkvalue.join(", "));
});
});

Use closest()
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked");
})
DEMO

Try,
$(document).on("click",".save",function(){
var checkedValues = $(this).closest("tr").find(".data :checked").map(function(){
return this.value;
}).get(); //["1","2"] depends on user selection
});
In the place of document use the closest static parent of .save button.
DEMO

you have to set checkid or checkclass for Check box :
$('#checkid').val();
$('.checkclass').val();
or
$("input[type='checkbox']").val();
or
$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

i think using this you can find the value of your check boxes
$('.save').on('click',function(){
$(this).prev().find("input[type='checkbox']").prop('checked');
})

Filter table with multiple radio inputs

All I want is filter the table with radio inputs.
This is my jsfiddle
I am using this inputs and table:
<div style="border:1px solid;">
<input type="radio" id="Bob" name="name" />Bob
<input type="radio" id="Jay" name="name" />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Position</th>
</tr>
<tr>
<td>Bob</td><td>Developer</td>
</tr>
<tr>
<td>Jay</td><td>Manager</td>
</tr>
<tr>
<td>Bob</td><td>Manager</td>
</tr>
<tr>
<td>Jay</td><td>Developer</td>
</tr>
</table>
and this js:
$('#Bob').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Bob"))').hide();
});
$('#Jay').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Jay"))').hide();
});
$('#developer').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Developer"))').hide();
});
$('#itManager').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Manager"))').hide();
});
All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.
I know js code is wrong but I wanted you make understand what I want to do.

Try this, more simple:
$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="position"]:checked').prop('id') || '';
$('tr').hide();
$('tr:contains(' + name + ')').show();
$('tr').not(':contains(' + position + ')').hide();
});
Demo here
The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:
<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager

How to close disable dropdown opening?

<div id=ControlId>
<select id="' +ControlId + '_text" value="Select Options" style="max-width:150px;background:White;Width:150px"> <option selected>Select Options</option></select>
</div>
<div id=ControlId + "_child" style="display: none" >
<table>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3
</td>
</tr>
</table>
</div>
I have created dropdownlist for multiple selection as following, how to disable default dropdown opening
this is my actural event in JQuery :
$("#" + ControlId).click(function () {
$("#" + ControlId + "_child").fadeIn("slow");
$("#" + ControlId + "_child").toggle();
});
How to disable default dropdown opening?

I'm not sure whether you're trying to disable the dropdown. If so try using the below code to disable it.
$("#" + ControlId + "_text").attr("disabled", true);
Also check your HTML code, it has to be cleaned up.
EDIT1: If you're using jQuery 1.6+, then try using prop;
$("#" + ControlId + "_text").prop("disabled", true);
EDIT2: Hide to option when dropdown is clicked.
$("#" + ControlId).click(function () {
$("#" + ControlId + " options").hide();
});
EDIT3: You're trying to have a placeholder for SELECT tag, currently it is unavailable.
Remove your inline styles for select and add the following css to your code.
select {
max-width:150px;
background:White;
height: 25px;
}
/* Hidden placeholder */
select option[disabled]:first-child {
display: none;
}
check out this JSFiddle in Firefox.

JavaScript +css - Change main category's checkbox css, if any items beneath it are checked

All,
I have the attached code snippet where a category checkbox is checked if all items underneath it are checked. How can I modify the code such that:
If any checkbox underneath any category is checked, the CSS Style of it's parent "Category" checkbox should look greyed out. (I do not want to disable the checkbox. Just look grey or any color through CSS). This will denote some items are checked if the category is collapsed.
If all items are checked underneath a category, then the checkbox doesn't have to look greyed out as it will be checked too.
All the existing code functionality should be maintained as it works great..
PS: Sorry for the HTML being a mess...
Any suggestions?
Thanks
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Expand")
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Collapse");
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']")
.attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length ==
$("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
.attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Apple</td>
<td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Banana</td>
<td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Orange</td>
<td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
<td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
<td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Eggplant</td>
<td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Tomato</td>
<td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Cabbage</td>
<td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Code looks familiar ;)
Include a CSS class similar to this one (add further styling if you need it)
.graymeout { background-color:#D8D8D8 }
Change toggleParentCheckboxes to this (some "optimizations" included. Refactored out common selector parts and removed a "double" selection by using filter)
function toggleParentCheckboxes(current, form) {
var selector1 = "#"+ form +" :checkbox[name='";
var selector2 = selector1 + current.name +"']";
var set = $(selector2);
var checked = set.length == set.filter(":checked").length;
// replace '[anything]' with '' instead of just '[]'
var ele = $(selector1 + current.name.replace(/\[[^\]]*\]/, "") +"']");
ele.attr("checked", checked);
if(!checked)
ele.addClass("graymeout")
else
ele.removeClass("graymeout");
ele=null; set=null; selector1=null; selector2=null;
}
If you change the call to initCheckBoxes in toggleTableRows to initCheckBoxes("frmDinnerMenu"); you will get the highlighting also on page load instead of just when first child is changed.

I had also used the same approach as mentioned by jitter. It works pretty well and in my opinion is the only option available since a tri-state check box is not available on a browser.