Only ONE button can be clicked per row - javascript

I'm trying to code that only ONE button can be selected per ROW. I tried too many this and this is the closest I did it.
I can selected and deselect it. But only one per row can be selected.
What my code does:
I can select any button and it will be added a class to it get red.
so now this button is selected. I can unselect it as well.
This is my code:
$('.btn').click(function(){
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
}else {
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
<style>
.selected {
color:red;
}
</style>
Some print to help:

You can do it like following. Just find the others .btn and remove .selected from them and set data-selected to false when you are selecting a .btn. Hope this will help you.
$('.btn').click(function () {
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
} else {
$(this).closest('tr').find('.btn').not(this)
.removeClass('selected').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn"/></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn" /></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
</table>

Why not just make radio buttons that looks like buttons, if you give them the same name they will already have the functionality you are looking for built in.
http://jsfiddle.net/DIRTY_SMITH/YB8UW/616/
<ul class="donate-now">
<li>
<input type="radio" id="a25" name="amount" />
<label for="a25">$25</label>
</li>
<li>
<input type="radio" id="a50" name="amount" />
<label for="a50">$50</label>
</li>
<li>
<input type="radio" id="a75" name="amount" checked="checked" />
<label for="a75">$75</label>
</li>
<li>
<input type="radio" id="a100" name="amount" />
<label for="a100">$100</label>
</li>
</ul>
<br>
<ul class="donate-now">
<li>
<input type="radio" id="b25" name="amountb" />
<label for="b25">$25</label>
</li>
<li>
<input type="radio" id="b50" name="amountb" />
<label for="b50">$50</label>
</li>
<li>
<input type="radio" id="b75" name="amountb" checked="checked" />
<label for="b75">$75</label>
</li>
<li>
<input type="radio" id="b100" name="amountb" />
<label for="b100">$100</label>
</li>
</ul>

I made a working example for you which can be used for multiple rows: https://jsfiddle.net/448feo3j/
$('.button-default').click(function() {
$(this).parents('tr').find('.button-default').removeClass('button-clicked').attr('data-selected', false);
$(this).addClass('button-clicked').attr('data-selected', true);
});

Related

HTML change radio button background

I would like the background color to remain the same foreach <ul> as lightgray.
Currently when clicking the radio button, it will change the ul background wrongly. I dont know how to make the jquery script loop thru all the ul available, I would really appreciate it if the script can be small, as this concept will be applied to 100+ ul
$(document).ready(function() {
$("ul.options-list li").on("click",function() {
if($(this).find('input[type="radio"]').is(':checked')) {
$('ul.options-list li').removeClass('change_color');
$(this).addClass('change_color');
}
});
});
ul.options-list li.change_color{
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>
You can loop through your ul li using each loop then use $(this) to check if the radio is checked depending on this add or remove your class.
Demo Code :
$(document).ready(function() {
$("ul.options-list li").on("click", function() {
//loop through ul li
$("ul.options-list li").each(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).addClass('change_color');//add change_Color
} else {
$(this).removeClass('change_color');//remove same
}
})
});
});
ul.options-list li.change_color {
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>
I am not great with javascript.
but maybe give all your radio buttons the same class and add something like this
document.getElementByClass("myCheck").checked = true;
and then addClass('change_color') to those selected.
https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Hide and show "other" option with checkbox

I´m trying to make this code work but I don´t know how to do it... When I click on Outro the upper div closes, and when I click Outra in the down one the upper close.
I don´t know what I´m doing wrong because the function has different values and if it´s only one it works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function() {
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>" /></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>

Select all checkboxes using Javascript or jQuery

I want to check/uncheck all check boxes of a particular row in a table if Select all Checkbox is selected for that particular row
Here is the html for a single row.
<tr>
<td class="left">
<label>Admin - Organization</label>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="selectallAO" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxViewAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxAddAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxEditAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxDeleteAOrganization" runat="server" /></label>
</div>
</td>
</tr>
There are 5 other rows like this for other pages as well. So, I want to check/uncheck all checkbox's for a particular row for which Select All was checked/unchecked.
UPDATE
Updated the jQuery function to make the master checkbox override child checkbox states.
How does something like this sound? I wasn't sure which classes were your checkboxes so you'll have to tweak this a bit:
HTML:
<div class="spacer"><input type="checkbox" class="selectallAO"> Select All</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
CSS:
div.spacer {
display: block;
}
JS:
$('.selectallAO').click(function() {
this.checked ? $('.checkboxAO').prop('checked', true) : $('.checkboxAO').prop('checked', false);
});
jsFiddle
The .parents("form:first") selector ensures that it only applies to those elements that are in the same form as the inputs you want to change. If for some reason you want to change elements outside of the form then you will need to remove that.
$(function() {
$(".selectallAO").on("click", function() {
debugger;
if ($(this).prop("checked")) {
$(this).parents("form:first").children(".checkboxAO").prop("checked", true);
} else {
$(this).parents("form:first").children(".checkboxAO").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="test" value="1" class="selectallAO">Select All</input>
<input type="checkbox" name="test" value="1" class="checkboxAO">1</input>
<input type="checkbox" name="test" value="2" class="checkboxAO">2</input>
<input type="checkbox" name="test" value="3" class="checkboxAO">3</input>
<input type="checkbox" name="test" value="4" class="checkboxAO">4</input>
</form>

how to check if all checkbox is unchecked

I have form like this:
So, if i checked the checkbox and then click edit, it will redirect to editing page and showing the checked data only.
The problems is appear if i didn't check any checkbox and then click edit or delete, it will show error message, probably because no data selected/checked.
So i want my edit and delete button to have some kind of alerts, so if i didn't check any data and then click edit or delete, i want it to show alerts or at least didn't do anything.
Here's my form code:
<form name='frmedit' method='post' action=''>
<table>
<tr>
<td>✓</td>
<td>No.</td>
<td>Nama</td>
<td>Merk</td>
</tr>
<tr>
<td><input type='checkbox' name='cek[]' value='$data[id_usulan]' ></td>
<td>$no.</td>
<td>$data[nama]</td>
<td>$data[merk]</td>
</tr>
</table>
<table>
<tr>
<td><input type='checkbox' name='allbox' value='check' onClick='checkAll(0);'/>Check All
|
<input type='button' name='update' value='Edit' onClick='setUpdateAction();'/>
|
<input type='button' name='delete' value='Delete' onClick='setDeleteAction();' /></td>
</tr>
</table>
</form>
The edit and delete function is in onClick, and the function is:
function setUpdateAction() {
if($('#frmedit input[type="checkbox"]').is(':checked')){
document.frmedit.action = "edit_user.php";
document.frmedit.submit();
}else{
alert("Please check at least one.");
return false;
}
}
As for setDeleteAction, i still didn't do anything.
Thank You.
Instead of checking all boxes are unchecked, you can check if anyof them are checked. Like
$("button").on("click",function(){
if($(".test:checked").length == 0) {
alert("nothing is checked");
} else {
alert("something is checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="test" value="1" />
<input type="checkbox" class="test" value="2" />
<input type="checkbox" class="test" value="3" />
<input type="checkbox" class="test" value="4" />
<input type="checkbox" class="test" value="5" />
<button>check</button>

how to check the default value of a radiobutton tag and display its related contents?

below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.

Categories