I want to uncheck all checkboxes that are in one table row.
I have this HTML code :
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" checked="checked" type="checkbox">
Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox">
Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox">
Feld 3
</td>
<td>...and so on
<td>
</tr>
What I have tried at now is this jquery code:
$("tr#unlosta_line_1").children("td").each(function(i) { $(i).prop("checked", false) } )
Problem with you implementation is that, You are setting checked property of TD element not checkbox.
You can directly use :checkbox selector, then set its checked property
$("#unlosta_line_1 :checkbox").prop("checked", false);
input is the children of the td
(function (){
$("#unlosta_line_1").children("td").each(function(i) {
$(this).children('input').attr("checked", false)
})
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" type="checkbox"> Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox"> Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox"> Feld 3
</td>
<td>...and so on
<td>
</tr>
</table>
Related
How do I check if all 'NO' answers on Yes/No table were chosen, this has to check on each change to any of the Yes/No answers, and then send an alert if all 'NO' were selected
Tried the below but no response seen..
$('.mb-n').change(function(){
if ($('.mb-n:checked').length == $('.mb-n').length) {
alert('all no ');
} else { alert('all y ');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="123" value="Y" class="{required: true, messages:{required:''}}" rel="" id="123_Y"></td>
<td class="mb-n"><input type="radio" name="123" value="N" checked="checked" id="123_N" rel=""></td>
</tr>
</table>
Using vanilla JavaScript :
function listenForInputChange ()
{
// Get all inputs with a NO value and spread them into an array
let inputs = [ ...document.querySelectorAll( '.mb-n > input' ) ];
// Add input event listener on table and listen for change
document.querySelector( 'table' ).addEventListener( 'input', evt => {
// if every inputs are checked
if ( inputs.every( input => input.checked ) )
{
// Do something...
console.log( 'All answers are NO' );
}
}, false );
}
listenForInputChange();
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="q1" value="Y"></td>
<td class="mb-n"><input type="radio" name="q1" value="N" checked></td>
</tr>
<tr class="mb-even">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y"><input type="radio" name="q2" value="Y"></td>
<td class="mb-n"><input type="radio" name="q2" value="N" checked></td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y"><input type="radio" name="q3" value="Y"></td>
<td class="mb-n"><input type="radio" name="q3" value="N" checked></td>
</tr>
</table>
You need to check if the radio is checked, not if the td is checked (<td> doesn't have a checked property).
I made some adjustments to your code, including modifications in HTML, that was a little bit weird. I added a similar class to all radio buttons and a similar class to all YES radios and NO radios, that way you'll have a much better control over what is selected and what is not.
Check below
$('.radioBtn').change(function(){
if ($('.radioNo:checked').length == $('.mb-n').length) {
console.log('all no');
} else if ($('.radioYes:checked').length == $('.mb-y').length){
console.log('all yes');
}else{
console.log("Some Yes and some No")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y">
<input type="radio" name="123" value="Y" class="radioBtn radioYes" id="123_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="123" value="N" class="radioBtn radioNo" checked id="123_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y">
<input type="radio" name="1234" value="Y" class="radioBtn radioYes" id="1234_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="1234" value="N" class="radioBtn radioNo" checked id="1234_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y">
<input type="radio" name="12345" value="Y" class="radioBtn radioYes" id="12345_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="12345" value="N" class="radioBtn radioNo" checked id="12345_N" >NO
</td>
</tr>
</table>
Assuming that every row in the table has a checkbox you should be able to do it like this without changing anything in your setup:
$('.mb-n').change(function(){
if ($("table").find("tr").length == $(".mb-n > input[type='radio']:checked").length)
window.alert("Oh noes...");
});
I need to show an error if none of the below checkboxes are checked using using JavaScript.
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
You can implement it using selecting all elements with some given name using document.querySelectorAll and an attribute selector using the pseudoclass :checked:
var checkedCheckboxes = document.querySelectorAll("[name='chk_stat[]']:checked");
if (checkedCheckboxes.length == 0) {
console.log("No checkbox is checked...");
}
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
I want all other checkboxes if one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?
As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.
(".chkbox").on('change', function() {
var locked = false;
// var for current row
var row = $(this).closest('tr').index();
var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');
$(this).on('click', function toggleLock(e) {
e.preventDefault();
// Make locked true if it was false, or vice-versa
locked = !locked;
// And apply that value to the 'disabled' attribute of the checkboxes
$checkboxes.attr('disabled', locked);
});
});
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
In this demo you can also uncheck and that action will enable each checkboxes in a row
working demo: http://jsfiddle.net/darxide/vpvaseL0/
$('body').on('change' , 'tr input' , function () {
var count_checked = 0;
$(this).parent().parent().find('input:checked').each(function() {
count_checked++
})
if(count_checked > 0){
$(this).parent().parent().find('input').each(function () {
$(this).prop('disabled' , true)
})
$(this).removeAttr('disabled')
} else {
$(this).parent().parent().find("input").removeAttr('disabled')
}
})
This should work:
$(".chkbox").click(function(){
var currentObj = $(this);
$(this)
.closest("tr")
.find(".chkbox").attr("disabled","disabled");
$(currentObj).removeAttr("disabled");
});
fiddle
You can use .closest().siblings().find().prop() method in this case. Another suggestion is to use group radios:
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
Here this.checked returns boolean value. If checked true and unchecked then false.
The issue seems to me that the way you have written your code that tells to bind the click event on currently clicked check box.
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Below is my HTML code which contains multiple checkboxes with the respective values in <td>. I got the values of clicked checkboxes through php which is an array format $res[]. I want to make the checkbox disappear of which i got values and make the <td> background color to red with the value of checkbox visible. I got the values of checkboxes in php as $res[0][seat]=>4; and $res[1][seat]=>1 where 4 and 1 are values. How to do this using jQuery?
<table>
<tr>
<td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td>
</tr>
</table>
Try this:
$('.chk').on('click', function(e){
e.preventDefault();
if($(this).is(':checked')) {
$(this).hide();
$(this).closest('td').css('background-color','red');
}
});
Fiddle here
UPDATED try this:
var arr=[4,1];// array list received from php
for(i=0;i< arr.length;i++){
$('table tbody tr td input[type=checkbox]').each(function(){
if($(this).val()==arr[i]){
$(this).hide();
$(this).closest('td').css('background-color','red');
}else if($(this).is(':visible')){
$(this).closest('td').css('background-color','pink');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td></tr></table>
use filter() in jquery
var arrayValue = [4, 1];
$(".chk").filter(function () {
return arrayValue.indexOf(+this.value) != -1 // check arrayvalue is present in check box or not using indexOf
}).closest("td").css('background-color', 'red').find(".chk").hide(); // set background for closest td and hide chk
DEMO
I want to set the checkbox to checked for input fields in the first 2 table rows of a table.
markup
<tbody>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
<td class="datatd">
<label id="">Option 1</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
</td>
<td class="datatd"><label id="">Option 2 </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption">
</td>
<td class="datatd"><label id="">Option 3</label>
</td>
</tr>
I know I can use $( "").prop('checked', true); to set the property but struggling with figureing out how to target the first 2.
Thanks
You can use for example nth-child(-n+2) selector:
$('table tr:nth-child(-n+2) :checkbox').prop('checked', true);
http://jsfiddle.net/B8h7N/
Just slice them:
$("[type=checkbox]").slice(0,2).prop('checked', true);