Only one checkbox is checked at the time [duplicate] - javascript

So i have a div thats auto generated and inside are 3 check boxes with different id's & names and by default none of them are checked!! If one happens to get checked then i need the other two unchecked!!
So only one can be checked at a time ...
So all unchecked or only one checked!
<div class="configoptions">
<table class="configtable" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[10]" id="co30" value="1" onclick="recalc()" type="checkbox">green</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[9]" id="co27" value="1" onclick="recalc()" type="checkbox">blue</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[11]" id="co31" value="1" onclick="recalc()" type="checkbox">white</label>
</td>
</tr>
</tbody>
</table>
</div>
Here is what i used to uncheck all divs on page ready.. since initially i need them unchecked.. that works great... now i need to make it so only one is check at a time if it is checked! Can someone gimme a hand,? Thx in advance!
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});

Use the prop function to change the checked property of checkbox and radio buttons
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Demo: Fiddle

I had a similar issue and solved it like so (using part of Arun P Johny's answer - I wanted to share for those of you who might come across this as well.)
(function($checkbox,options){
$($checkbox).on('change', function() {
$("input[type='checkbox']").not(this).prop('checked', false);
});
});

Related

Getting the value of checkbox from the table cell using Jquery

I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
$('.option').click(function(e) {
e.preventDefault();
alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE
});
Is there an easier solution than traversing with relative elements?
You can try below logic where find parent tr and then find checkbox to read value
$(function(){
$('.option').on('click', function(e) {
e.preventDefault();
var value = $(this).closest('tr').find('input:checkbox').val();
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
</table>
Try $.parents() instead:
$(this).parents('tr').find('input[type=checkbox]').val()
You can use jQuery's $(...).siblings() method and pass it a selector:
$('.option').click(function(e) {
e.preventDefault();
alert($(this).siblings("#r0[type='checkbox']").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
for me, .find() method seems to return an array of checkbox objects, I need to add [0] to the end to be able to apply .val() method, otherwise I got 'on' all times. Example:
var value = $(this).closest('tr').find('input:checkbox')[0].val()
Yo can do by using filtering. See this demo link
$(this).closest('td').parent().find('input[type=checkbox]').val()

How to hide a row if checkbox is not selected inside html table?

I have dynamically created checkboxes inside HTML table like given in the following code. And I am trying to hide the rows whose checkbox is not checked by using below lines of code on the another button click() function.
$(document).on("click", "#allotBtn", function() {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentList tr:nth-child(" + i + ")").css("display", "none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
<tr role="row" class="odd">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Raja Mir</td>
<td>7th</td>
<td>Male</td>
<td>Active</td>
<td>2016</td>
</tr>
<tr role="row" class="even">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Omer Jan</td>
<td>4th</td>
<td>Male</td>
<td>Active</td>
<td>2018</td>
</tr>
</tbody>
If there are more than 3 rows in the table, the above code hides the rows haphazardly.
Please help!!!
Try this:
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
The issue with your code is that i in the .each() loop starts indexing the elements at 0, whereas when you call nth-child in CSS, the first element is numbered as 1. Therefore the row you hide is always off by 1.
The fix is simple - add 1 to i each time you use it to set nth-child:
$(document).on("click", "#allotBtn", function () {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
}
});
});
Working demo: http://jsfiddle.net/jqabpru2/9/
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://api.jquery.com/each/
Or of course you can simplify it much more like in Viam's answer (https://stackoverflow.com/a/51762843/5947043) by finding the row which is the parent of the checkbox instead.
Again, credit to Viam, this can be done by writing
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
instead. Demo of this approach: http://jsfiddle.net/jqabpru2/10/
All you have to do is write the following code instead of your current jQuery code in a click function:
var checkList = $("tr[role='row'] .commoncheckbox");
checkList.each(function(){
$($(this).closest("tr[role='row']").hide());
if($(this).is(":checked")){
$($(this).closest("tr[role='row']").show());
}
});
Here is jsfiddle link on this.
Here is how to check a checkbox is checked or not using jQuery.
This one-liner should do it. No need for loops.
$(function() {
$(document).on("click", "#allotBtn", function() {
$('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
});
});
Also, attaching the click event like this seems super strange - what exactly are you delegating the event to the document itself for anyway? Is the whole thing loaded dynamically?

Only one checkbox between two <td> at each <tr>

I have a code like this:
<tr>
<td>
<input type="checkbox" name="ordered[]" value="xxx"></input>
</td>
<td>
<input type="checkbox" name="inStock[]" value="yyy"></input>
</td>
</tr>
The code is repeated for each result in MySQL.
Also I'm using this code:
<script>
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
});
</script>
I need to select only one checkbox per row (per table tr). What should I change in javascript?
Thanks!
I think you need something like this
$( document ).ready(function() {
$('input[type="checkbox"]').on('change', function() {
var checkedValue = $(this).prop('checked');
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input[type="checkbox"]').each(function(){
$(this).prop('checked',false);
});
$(this).prop("checked",checkedValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
<td>
<input type="checkbox" name="inStock[]" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="inStock[]" value="yyy" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
</table>
I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.
Try applying selector based on element name:
$('input[name="ordered[]"]').on('change', function() {
Or you would probably want to add some other attribute to identify the specific element you wish to select.
Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:
$(this).siblings().first().prop('checked', false);
You can also do
$(this).siblings(".bar").eq(0).text()
You can use the eq method to reduce the matched set of elements to one at a specific index:
If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.

How to create pop up on selecting the checkbox in HTML

I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.

How do I check multiple checkboxes with jquery without giving each an id?

I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this without that though.
All of my checkboxes are in a similar grouping. I have them grouped in a consistant way.
I have my work on a fiddle here.
Here is my code
window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
var $row = $(this);
if ($row.children('td:first').find('input:checkbox').prop('checked')) {
$(this).find('td.imageBox').each(function (index) {
var $imageBox = $(this);
if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
++(totals[index]);
}
});
}
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});
}
My problem is with the onCheckForm function.
Thank you.
Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.
Lets start off with a very simple table with a checkbox column:
<table>
<thead>
<tr>
<th scope='col' id='toggler'>
<input type='checkbox' id='toggleAll'>
<label for='toggleAll'>Select all</label>
</th>
<th scope='col'>A column</th>
</tr>
</thead>
<tbody>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
</tbody>
</table>
Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).
I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.
Here is some JavaScript code:
$('#toggleAll').change(function () {
$('td[headers~="toggler"] > input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
We are binding a function to the change event to the checkbox in the header.
The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.
The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").
Our basic functionality is done here.
We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.
The state of the header checkbox should be:
Unchecked if 0 are checked
Interdetermine if (0, n) are checked
Checked if n are checked
Where n indicates all the checkboxes.
To do this, we bind a function to the change event of each of the boxes in the table rows:
$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
var allChecked = true, noneChecked = true;
var headerCheckbox = $('#toggleAll');
$('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
if(domElement.checked) {
// at least one is checked
noneChecked = false;
} else {
// at least one is unchecked
allChecked = false;
}
});
if(allChecked) {
headerCheckbox.prop('checked', true);
headerCheckbox.prop('indeterminate', false);
} else if (noneChecked) {
headerCheckbox.prop('checked', false);
headerCheckbox.prop('indeterminate', false);
} else {
headerCheckbox.prop('indeterminate', true);
}
});
I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.
See the jsFiddle demo.
Hope this helps, I sure learned quite a bit while answering the question!
See this fiddle for a cleaner way:
http://jsfiddle.net/W75dy/19/
<td class="field">
<form class="fieldCheck">
<input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
</form> Programs
</td>
$('#Row1Chk').on('change', function(event) {
$('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

Categories

Resources