I would like some help with checkbox validation.
If you look in below picture, when user click the image, the checkbox becomes selected.
What I would want is if all checkbox are selected alert an simple message.
This is a code to select checkbox by clicking on an image.
$( document ).ready(function() {
$("#roll-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>").click (function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>').prop('checked', true);
}
});
});
So I can select check box by clicking on an image. How I can alert message if all check box are selected. Soon user click last picture, the picture will disappear, the red tick box will appear and user should see alert message.
Thank you in advance.
You can achieve this by getting the number of elements with the class 'checked'. If the number is 6, then you can show the alert.
Try this way:
var checkboxes = $('[type="checkbox"]');
checkboxes.on('change', function() {
var checked = $('[type="checkbox"]:checked');
console.log('all:', checkboxes.length, ' / ', 'checked:', checked.length);
if (checkboxes.length === checked.length) {
console.log('ALL CHECKED!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3
You can use the following javascript code:
$(function(){
$('input[type="checkbox"]').click(function() {
totalCheckboxCount = $('input[type="checkbox"]').length;
selectedBoxesCount = $('input[type="checkbox"]:checked').length;
if(totalCheckboxCount == selectedBoxesCount) {
alert("All checkboxes selected!");
}
});
});
Related
i have invoice page and customer select the invoice and pay. invoice page if invoices are multiple then customer need to select check box each then click on Generate Invoice for payment. i want if invoice are multiple customer should check All then its work customer dont have choice select single. he should select All the check boxes then its work.
i think on page javascript code is below:
<script language="JavaScript">
function checkAll(theForm, cName) {
for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
if (theForm.elements[i].checked == true) {
theForm.elements[i].checked = false;
} else {
theForm.elements[i].checked = true;
}
}
</script>
on invoice page i have also option select All check box
code is below:
<input type="checkbox" name="kk" id="kk" onClick="checkAll(document.getElementById('form4'), 'chk1');" >
when invoice are more multiple from database check code is:
<input name="orderNo[]" <?php if ($SQLRow["priceStatus"]=="Received") { ?> disabled="disabled"<?php } ?> type="checkbox" id="orderNo[]" value="<?php echo $SQLRow["orderNo"];?>" class="chk1" />
i just want one help if all the check boxes are selected then its work.
Try this
$('#kk').on('click', function() {
if($(this).prop("checked")){
$('input:checkbox').each(function() {
$(this).attr("checked", "checked");
$(this).prop("checked", true);
});
}
else{
$('input:checkbox').each(function() {
$(this).removeAttr("checked", "checked");
$(this).prop("checked", false);
});
}
});
Jsfiddle is here
Hi guys i have two checkboxes.
<li>
<?=form_checkbox('heart_rate', 'yes', sel_checkbox($admission['heart_rate'], $observation[0]->heart_rate))?>
<?=form_label('Heart Rate')?>
</li>
<li>
<?=form_checkbox('blood_pressure', 'yes', sel_checkbox($admission['blood_pressure'], $observation[0]->blood_pressure))?>
<?=form_label('Blood Pressure')?>
</li>
i want to create a third checkbox labelled all so that when it is ticked all my checkboxes are ticked. Any ideas?
Useing jQuery this can be done very easily, just give id to the check all checkbox checkAllId:
And the following code will check all the checkbox:
$('#checkAllId').change(function(){
if($(this).attr('checked')){
//uncheck all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',false);
}
);
}else{
//check all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',true);
}
);
}
});
you will have to give id to checkbox as:
I think you have not given id properly try this :
<?php
$data = array(
'name'=> 'checkAllId',
'id'=> 'checkAllId',
);
form_checkbox($data)
?>
Also confirm in the firebug whether id is coming properly or not.
Hope this will help!
$(function(){
$('input[class=3rd]').on('click',function(){
var this = $(this);
if($(this.':checkbox:checked').length > 0)
{
// If 3rd is checked, check all
$('.1st').prop('checked', true);
$('.2nd').prop('checked', true);
}
else
{
// Esle uncheck all
$('.1st').prop('checked', false);
$('.2nd').prop('checked', false);
}
})
})
. .I need a help. . I have a table row in which there is a checkbox, textbox. and some numbers
On clicking the row the checkbox gets checked and clicking it again the checkbox gets unchecked. But there is a problem, after checkbox is checked when i click on textbox to enter a value the checkbox also gets unchecked.I don't want that to to happen. I need to remove the row select function only for the textbox cell. . please help out guys. . .
js code:
function selectRow(row)
{
var chk = row.getElementsByTagName('input')[0];
if (!chk.disabled) {
chk.checked = !chk.checked;
}
}
fiddle
Just add onclick="event.stopPropagation()" to the textbox :
<td width="30" valign="middle"><input name="Item2_quantity1" type="text"
class="tb5"placeholder="1" id="Item2_quantity1" size="1" maxlength="2" value="1"
onclick="event.stopPropagation()" /></td>
Here's an updated fiddle
As you are using jQuery in fiddle. Try this:
$("table#Item2_listing tr").click(function(e){
if(e.target.type!=="text"){
var chk = $(this).find('input[type=checkbox]')[0];
if (!chk.disabled) {
chk.checked = !chk.checked;
}
}
});
DEMO
I am using the bootstrap switches to change a check box into a toggle box. When the page loads the switch is in the data-off position being red and text saying no.
<div class="make-switch" id="use_map_switch" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
<input type="checkbox" name="use_map" id="use_map" value="1" {if $form_data.use_map eq 1}checked{/if} />
</div>
I run a jQuery script once the check/switch is clicked and changed to yes/green. If the results turn back false I want to change the switch/check back to No/red.
I have tried using the line $('#use_map').prop('checked', false); but this has had no affect.
$('#use_map_switch label').click(function(){
// need to do opposite
// if its checked when clicked then switch will be going to unchecked
if($('#use_map').is(':checked')){
$('.map-area').hide();
} else {
address = getAddress();
if(address == ''){
modalTitle = 'Error';
modalText = 'Please enter an address before using the map';
$('#use_map').prop('checked', false);
show_modal(modalTitle, modalText);
} else {
$('.map-area').show();
$('.map-area').html(address);
}
}
});
I want to deselect a particular selected checkbox when condition fails.i have selected number of checkboxes but when my condition fails, i want to show there is alert message and don't want to select that checkbox. But when i am doing this, there is alert message but checkbox is selected.I want to unselect this selected checkbox when message is displaying
<input type="checkbox" id="ChkIds_<?php echo $row['leader_id']; ?>" value="" name="selected[]" onChange="myFunction(this)" class="<?php echo $row['state_point'];?>">
<td align="center" bgcolor="#FFFFFF"><span id="total" class="0">1000</span></td>
<script type = "text/javascript">
function myFunction(obj) {
if(obj.checked==1) {
var valuenew=obj.value;
var NewVal=$('#total').text();
var calcVal=Number(NewVal)-Number(valuenew);
if(calcVal<=0)
{
alert('hi');
}
else
{
$('#total').text(calcVal);
obj.id.checked=false;
}
}
else {
var valuenew=obj.value;
var NewVal=$('#total').text();
var calcVal=Number(NewVal)+Number(valuenew);
$('#total').text(calcVal); }
}
</script>
You can call a function onchange and uncheck the desired checkbox
$("#chkbox_id:checked").attr("checked", false);
If you want to uncheck the checkbox which was just check, then:
$(obj).attr("checked", false);
If another one:
$("#checkboxid").attr("checked", false);
If all of them:
$("input:checkbox").attr("checked", false);