I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?
I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/
First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});
Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.
You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}
Related
this might be a stupid question but I need to get values of checked checkboxes of a specific row.
<form method="POST" action="flight_cart.php">
<table>
<tr id=1>
<td><input id="foodType" type="checkbox" value="Burger">Burger</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=2>
<td><input id="foodType" type="checkbox" value="Sandwich">Sandwich</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=3>
<td><input id="foodType" type="checkbox" value="Sub">Sub</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr><td><button type="submit">Add to Order</td></tr>
</table>
</form>
So basically, I want users to be able to pick for example: Burger with jalapeno, Sandwich with jalapeno, mustard, and chili, and sub with chili only. And storing them into an array so I can pass it to cart page. Thank you in advance!
use code
$("tr[id='1']").find("input[type='checkbox']:checked")
Just add some id to form,
var choices=[];
$("#formId input:checkbox:checked").each(function() {
choices.push($(this)[0].value);
});
and you will get array of all selected checkboxes in form.
Try this, it might be what you are looking for or it should give you a good idea about how to solve your problem
Note: It is not good practice to have multiple elements with the same Id. Use class for that
This example also checks that you have selected a foodtype before it pushes the data into the array.
$("table button").click(function(e) {
e.preventDefault()
var food = [];
$("table tr").each(function() {
if ($(this).find(".foodType").prop("checked") == true) {
var values = $(this).find('input:checkbox:checked').map(function() {
return this.value;
}).get();
food.push(values)
}
})
console.log(food)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="">
<table>
<tr id=1>
<td><input class="foodType" type="checkbox" value="Burger">Burger</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=2>
<td><input class="foodType" type="checkbox" value="Sandwich">Sandwich</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=3>
<td><input class="foodType" type="checkbox" value="Sub">Sub</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr>
<td><button type="submit">Add to Order</td></tr>
</table>
</form>
<table class="table borderless">
<thead>
<tr>
<th>Rank</th>
<th>+/-</th>
<th>Searches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
<td><input type="checkbox" > Up</td>
<td><input type="checkbox" > Over</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
<td><input type="checkbox" > Down</td>
<td><input type="checkbox" > Under</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
<td><input type="checkbox" > No movement</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Not in top 100</td>
</tr>
</tbody>
</table>
Script:
$(document).ready(function () {
$(".custom").change(function () {
$(".custom").parent().find(".custom-selector").prop("checked", true);
})
});
What I need is a radio button that checks all the boxes when selected.
Right now nothing happens when I click the radio button. However, if I add this radio button:
<input type="radio" id="op5" value="1" name="options2" class="custom">
Then they both work. Even the initial one checks all the boxes.
What is this strange behavior? I'm missing something
EDIT: it appears the radio button must be outside the table? Can I have it inside somehow?
try:
$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);
or Just:
$(".custom-selector").prop("checked", true);
Try this:
$(".custom").change(function () {
$(this).parents('tbody').find(".custom-selector:checked");
});
and some reference: https://api.jquery.com/checked-selector
eventually remove your action selector using .not(this)
Try this :
$(document).ready(function () {
$(".custom").change(function () {
$(".custom-selector").prop("checked", true);
})
});
I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.
<table class="table">
<tr>
<th>Name</th>
<th>InUse</th>
<th></th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
<tr/>
<!-- not checked -->
<tr>
<td>foo 3</td>
<td>
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
You can use :has selector or .has() method to checking existence of element in parent.
$("button").click(function(){
$("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>InUse</th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
<tr>
<td>foo 3</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 4</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
</table>
<button>Only checked</button>
You can test code on full of you html in demo
Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide.
$(document).ready(function(){
$("input[type=submit]").click(function () {
$("input:not(:checked)").each(function () {
$(this).closest('tr').hide();
});
});
});
Please use jquery and place this code in your tag
$(document).ready(function () {
$("#btnClick").on("click", function () {
$(".table tr").each(function () {
if (!$(this).find("td input:checkbox").is(":checked")) {
$(this).hide();
}
})
})
});
This should work with your case.
This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:
<input type="checkbox" onClick="disablerow(this);">
function disablerow(el) {
if (el.checked == true) {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
}
else {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
}
}
I have a table as below:
..
There have been multiple questions asked for getting the values but in this case I should always have a parent item name. Suppose If a user selected only one subitem in "Shirts", then I should be able to get all the values from the selected tr and with that I need parent item name also i.e "shirts" and if some one clicks on all the subitems of a parent item, then all the values of all tr are need to be in some sort of array object on click of a "Save" button. I am trying hard to do this. Any help would be really appreciated. Though I have attached the HTML but this HTML is being generated at run time.
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td>Name</td>
<td>Sub Item</td>
<td>User Input</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup1" class="cls1" onclick="checkUncheckAll(this);" />
</td>
<td>Shirts
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item1</td>
<td>SubItem1</td>
<td>
<input id="1datepicker" name="1datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item2</td>
<td>SubItem2</td>
<td>
<input id="2datepicker" name="2datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item3</td>
<td>SubItem3</td>
<td>
<input id="3datepicker" name="3datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup2" class="cls2" onclick="checkUncheckAll(this);" />
</td>
<td>Jeans
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item4</td>
<td>SubItem4</td>
<td>
<input id="4datepicker" name="4datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item5</td>
<td>SubItem5</td>
<td>
<input id="5datepicker" name="5datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item6</td>
<td>SubItem6</td>
<td>
<input id="6datepicker" name="6datepicker" type="text" /><script>
</script></td>
</tr>
</table>
Script code looks like below:
<script>
function checkUncheckAll(sender) {
var chkElements = document.getElementsByClassName(sender.className);
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
function CheckCorrespondingHeader(sender) {
ControlLength = $("[name='" + sender.name + "']").length;
var countchecks = 0;
$("[name='" + sender.name + "']").each(function () {
if ($(this).prop('checked') == true) {
countchecks = countchecks + 1;
}
});
if (ControlLength == countchecks) {
$("#chk" + sender.name).attr('checked', 'checked');
}
else {
$("#chk" + sender.name).prop('checked', false);
}
}
function PickAllCheckedRows() {
}
</script>
As far as I can tell your code should work if you fix one issue. You are determining the number of sub rows that need to be checked to make the header row be checked using $("[name='" + sender.name + "']").length;. But unless I'm mistaken sender.name is never set. Of course if you set it this still won't work because your each function will include the header row. There are several solutions to this but I would recommend using a data attribute instead of the name attribute like so:
Markup:
<table>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 1 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 2 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group2" ... /></td>
</tr>
<tr>
<!-- row 3 -->
<td><input type="checkbox" data-in-group="Group2" ... /></td>
</tr>
</table>
Script:
function CheckCorrespondingHeader(sender) {
var group = $("[data-in-group='" + sender.data('headForGroup') + "']");
var groupSize = group.length;
var countchecks = 0;
group.each(function () {
if ($(this).prop('checked') === true) {
countchecks = countchecks + 1;
}
});
if (groupSize === countchecks) {
$(sender).attr('checked', 'checked');
} else {
$(sender).prop('checked', false);
}
}
is there any reason why these table checkboxes would return a '1' or true statement whether they are checked or not?
<table>
<tr>
<td>Lake/Body Name:</td>
<td><input type="text" id="title"></td>
</tr>
<tr>
<td>Fishing:</td>
<td><input type="checkbox" value="1" id="fish"></td>
</tr>
<tr>
<td>Wakeboarding:</td>
<td><input type="checkbox" value="1" id="wake"></td>
</tr>
<tr>
<td>Skiing:</td>
<td><input type="checkbox" value="1" id="ski"></td>
</tr>
<tr>
<td>Tubing:</td>
<td><input type="checkbox" value="1" id="tube"></td>
</tr>
<tr>
<td>Comments:</td>
<td><input type="text" id="comments"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Save & Close" onclick="saveBoat()"></td>
</tr>
</table>
This is a content VAR for a google maps infowindow, BTW...
It depends on what Javascript you are using to check for it being "checked". Using .value on a checkbox element is not the same as using the .checked property. If you see, you are setting the value attribute for the checkbox elements in the HTML as 1. As I said before, this is unrelated to its checked state and is accessed differently.