<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);
})
});
Related
I have created a HTML form with checkbox like this, but I am struggle to turn them into two dimensional
<input type="checkbox" id="orange" name="fruit1" value="orange">
<input type="checkbox" id="banana" name="fruit2" value="banana">
<input type="checkbox" id="apple" name="fruit3" value="apple">
<input type="checkbox" id="pear" name="fruit4" value="pear">
<input type="checkbox" id="ripe" name="feature1" value="ripe">
<input type="checkbox" id="price" name="feature2" value="price">
<input type="checkbox" id="quantity" name="feature3" value="quantity">
<input type="checkbox" id="cost" name="feature4" value="cost">
What I want is something like this
orange
banana
apple
pear
ripe
Tick
price
Tick
Tick
Tick
quantity
Tick
Tick
cost
Tick
Any method to achieve this?
You can build an table like below
<form method="POST">
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
<th>orange</th>
<th>banana</th>
<th>apple</th>
<th>pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" name="matrix[ripe][]" value="orange"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="banana"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="apple"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="pear"></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" name="matrix[price][]" value="orange"></td>
<td><input type="checkbox" name="matrix[price][]" value="banana"></td>
<td><input type="checkbox" name="matrix[price][]" value="apple"></td>
<td><input type="checkbox" name="matrix[price][]" value="pear"></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" name="matrix[quantity][]" value="orange"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="banana"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="apple"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="pear"></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" name="matrix[cost][]" value="orange"></td>
<td><input type="checkbox" name="matrix[cost][]" value="banana"></td>
<td><input type="checkbox" name="matrix[cost][]" value="apple"></td>
<td><input type="checkbox" name="matrix[cost][]" value="pear"></td>
</tr>
</tbody>
</table>
<button type="submit">sub</button>
</form>
if you submit form like below
Output of the form like below
Updated :if you are using Laravel
#php
$fruits=[
'orange',
'banana',
'apple',
'pear'
];
$features=['ripe','price','quantity','cost'];
#endphp
<form method="POST">
#csrf
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
#foreach($fruits as $fruit)
<th>{{$fruit}}</th>
#endforeach
</tr>
</thead>
<tbody>
#foreach($features as $value)
<tr>
<td>{{$value}}</td>
#foreach($fruits as $fruit)
<td><input type="checkbox" name="matrix[{{$value}}][]" value="{{$fruit}}"></td>
#endforeach
</tr>
#endforeach
</tbody>
</table>
<button type="submit">sub</button>
</form>
using jquery
<div id="dynamic-content"></div>
<script>
let fruits=[
'orange',
'banana',
'apple',
'pear'
];
let features=['ripe','price','quantity','cost'];
$.each(features , function(index, val) {
console.log(index, val)
});
let html=`<table class="table table-bordered ">
<thead>
<tr>
<th></th>`;
$.each(features , function(index, val) {
html += ` <tr>
<td>${val}</td>`;
$.each(fruits, function (index, val) {
html += `<td><input type="checkbox" name="matrix[${val}][]" value="${val}"></td>`;
})
})
html+=`</tr></tbody>
</table>`;
$('#dynamic-content').html(html)
</script>
I don't fully understand what you want to do. Maybe this works?
<table>
<thead>
<tr>
<th></th>
<th>Orange</th>
<th>Banana</th>
<th>Apple</th>
<th>Pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" id="orange_ripe" /></td>
<td><input type="checkbox" id="Banana_ripe" /></td>
<td><input type="checkbox" id="Apple_ripe" /></td>
<td><input type="checkbox" id="Pear_ripe" /></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" id="orange_price" /></td>
<td><input type="checkbox" id="Banana_price" /></td>
<td><input type="checkbox" id="Apple_price" /></td>
<td><input type="checkbox" id="Pear_price" /></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" id="orange_quantity" /></td>
<td><input type="checkbox" id="Banana_quantity" /></td>
<td><input type="checkbox" id="Apple_quantity" /></td>
<td><input type="checkbox" id="Pear_quantity" /></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" id="orange_cost" /></td>
<td><input type="checkbox" id="Banana_cost" /></td>
<td><input type="checkbox" id="Apple_cost" /></td>
<td><input type="checkbox" id="Pear_cost" /></td>
</tr>
</tbody>
</table>
One way would be to build a table and input in every cell a inputfield with the value x/y.
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>
I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.
Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here
I need to check/uncheck a checkbox that exist inside a row under table body when it is clicked anywhere within a row except a link. I tried to make it working by using jQuery's prop, but something is not working properly.
I have a table structure like below:
<table id="anywhere_click">
<thead>
<tr>
<th><input type="checkbox" onclick="selectAll('myDataID[]');" /></th>
<th>Title</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="myDataID[]" value="1" /></td>
<td>Stackoverflow</td>
<td>Some text here....</td>
</tr>
<tr>
<td><input type="checkbox" name="myDataID[]" value="2" /></td>
<td>Google</td>
<td>
This is a Link<br />
Some text here....<br />
<img src="something.jpg" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="myDataID[]" value="3" /></td>
<td>test</td>
<td>Some text here....</td>
</tr>
</tbody>
</table>
$('#anywhere_click tbody tr').click(function (e) {
if(!$(e.target).is('#anywhere_click td input:checkbox'))
$(this).find('input:checkbox').trigger('click');
});
$('#anywhere_click tr a').click(function (e) {
e.stopPropagation();
});
If you checked when the site 's loading.
You have to add in the tag <td><input type="checkbox" name="myDataID[]" value="3" /></td>
checked.
<td><input type="checkbox" name="myDataID[]" value="3" checked /></td>
With the button you want checked and unchecked.
Info: Information
and example: Examble with button checked and unchecked
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();
}