how to check if all checkbox is unchecked - javascript

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>

Related

How can I change Color of a <td> with a radio button?

How can I change the color of a <td> element based on the value of a radio button? I would like to set <td bgcolor></td> to red if the radio button is checked "NO" and to green if the radio button is checked "OK".
function color(){
if(radio1.checked()){
td1.bgcolor="green";
}
if(radio2.checked()){
td1.bgcolor="red";
}
}
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color()"/> <BR>
NO <input type="radio" name="radio2" id="radio2"value="NO"/>
</form>
</td>
</tr>
</table>
I Know that this code is very wrong but it's an example to make you understand my question
Few points:
Define radio buttons as part of the same group with the name property (radio buttons with the same name belong to the same group).
Attach the function to the onchage event of both the radio buttons.
You have to use element's style property to set the backgroundColor.
Try the following way:
function color(el){
if(el.value=="OK"){
el.parentNode.parentNode.style.backgroundColor="green";
}
else{
el.parentNode.parentNode.style.backgroundColor="red";
}
}
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio" id="radio1"value="OK" onchange="color(this)"/> <BR>
NO <input type="radio" name="radio" id="radio2"value="NO" onchange="color(this)" checked/>
</form>
</td>
</tr>
</table>
You should use javascript change event to run your code on raido button change. In event listener check state and value of target radio to setting background color.
$(":radio").change(function(){
if (this.checked && this.value == "OK")
$(this).closest("td").css("background", "green");
else if (this.checked && this.value == "NO")
$(this).closest("td").css("background", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio1" id="radio1" value="OK"/>
<br>
NO <input type="radio" name="radio1" id="radio2" value="NO" checked />
</form>
</td>
</tr>
</table>
Also you do this work using simple code:
$(":radio").change(function(){
if (this.checked)
$(this).closest("td").css("background", this.value=="OK" ? "green" : "red");
});
You could pass in a variable along with the function call on the Ui
For example:
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color('ok')"/> <BR>
NO <input type="radio" name="radio2" id="radio2"value="NO" checked="color('no')"/>
Then in your Javascript you can catch the string and check for it's contents:
function color(CB) {
var TEMP = CB;
if(TEMP == 'ok') {
td1.bgcolor="green";
}
else if(TEMP == 'no'){
td1.bgcolor="red";
}
}
function color()
{
if(document.getElementById("radio1").checked)
{
document.getElementById("td1").style.backgroundColor = "green";
}
if(document.getElementById("radio2").checked)
{
document.getElementById("td1").style.backgroundColor = "#B35556";
}
}
<body>
<table>
<tr>
<td bgcolor="#B35556" id="td1">
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" onclick="color()"/> <BR>
NO <input type="radio" name="radio1" id="radio2"value="NO" onclick="color()" checked>
</form>
</td>
</tr>
</table>
</body>

Check and uncheck all checkboxes with jquery

I am using this script to check and uncheck all checkboxes:
$('#checkall').click(function () {
var checked = $(this).data('checked');
$('.chkall').find(':checkbox').attr('checked', !checked);
$(this).data('checked', !checked);
});
It works great, but as soon as I uncheck several checked checkboxes after "check all" and then hit "uncheck all" and "check all" again, those previously unchecked checkboxes are not checked again. Help would be great! Thank you very much!
This might be the correct way..
Use prop instead of attr and group the checkbox list inside a div, just for organizing purposes. Also use the checked as it is, don't negate it.
$(document).ready(function() {
$('#checkall').click(function() {
var checked = $(this).prop('checked');
$('#checkboxes').find('input:checkbox').prop('checked', checked);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
$('#checkall').click(function(){
var d = $(this).data(); // access the data object of the button
$(':checkbox').prop('checked', !d.checked); // set all checkboxes 'checked' property using '.prop()'
d.checked = !d.checked; // set the new 'checked' opposite value to the button's data object
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='checkall' data-checked='false'>check/uncheck all</button>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
I guessed what your HTML looks like, in terms of the triggering button, but what I don't know is how you initially set the data on it. hope this is the way you have it coded. if not, please tell.
You simply need to get all checkboxes and check them all.
$('#checkall').click(function() {
var _this = this;
$('#checkboxes').find('input[name="checkAll"]').each(function() {
if ($(_this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes" class=".chkall">
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
</div>

Only ONE button can be clicked per row

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);
});

Multiple buttons on an html page to reveal text step by step rather than simultaneously?

trying to create a list of about 7 questions with a click to reveal answer button next to each question.
only problem is when i click one button, it runs the entire js code and shows ALL the answers not just that particular one.
here is my code
<table>
<tr>
<td>Question 1 </td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 2</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space1">
<input type="submit" name="b2" value="2" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space1").text("Answer 2").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 3</td>
<td class = "aligncenter">
<form action="javascript:void(2);">
<div id="reveal-space2">
<input type="submit" name="b3" value="3" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space2").text("Answer 3").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 4</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space3">
<input type="submit" name="b4" value="4" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space3").text("Answer 4").show();
return true;
});
</script>
</td>
</tr>
</table>
how do i fix it to make it so that when the "1" button is clicked it doesn't reveal the texts to the other buttons ?
i may need to take an entirely different approach
thanks for the help in advance
Your form needs unique ID, because when you are setting up your form submit function $("form") is selecting all your forms.
Try changing
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
To
<form id="form1" action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("#form1").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
The changes are id="form1" and $("#form1")
Slightly different approach: you can load in all the answers in hidden divs within the form element, and selectively show those divs by finding them in relation to the form that called the submit function, so that the other dormant form don't get triggered.
$("form").submit(function() {
$(this).find("#answer").show();
$(this).find("#reveal-space").hide();
});
Benefits: you don't need unique IDs, you only need one submit function, the text doesn't have to be contained in the jQuery.
jsFiddle
<table id="QnA">
<tr>
<td>Question 1</td>
<td class = "aligncenter">
<input type="button" value="Show Answer" data-answer="Answer goes here" class="submitbutton aligncenter"/>
</td>
</tr>
</table>
<script type="text/javascript">
$("#QnA :input").on("click", function() {
$(this).parent().html($(this).data("answer"));
});
</script>
You don't need a form or any submits, just make everything self-referential (you actually probably don't even need an ID on that table, but I don't know what the rest of your page looks like).

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