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
Related
I am new at coding in SharePoint. I have created a form which has multiple radio buttons. I want to hide or show text box based on radio button selection.
1) Field Name: Is this an urgent request
2) Radio button Option: Yes/No
3) Field Name: Justification for urgency
If the user selects Yes, I want the field 3) to be shown else hidden. I have added the below code in script editor and is working perfect.
Now the question is, I have another field with same Yes/No option and how to expand the code for this:
4) Field Name: Is this critical client
5) Radio button Option: Yes/No
6) Field Name: Brief description of client
If the user selects Yes, I want the field 6) to be shown else hidden.
Code that is working perfect for 1) to 3)
<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("span[title='Yes']>input").change(function(){
if($(this).is(":checked")){
$("nobr:contains('Justification for urgency')").closest('tr').show();
}
});
$("span[title='No']>input").change(function(){
if($(this).is(":checked")){
$("nobr:contains('Justification for urgency')").closest('tr').hide();
}else{
$("nobr:contains('Justification for urgency')").closest('tr').hide();
}
});
});
</script>
Also, is there a way if we make the hidden text box as mandatory, and while hiding, can it add a text as "NA" and hide.
If you have control over the HTML, I'd suggest you to create relationship between elements using attributes and class binding. Example:
$('.yes_no_radio').change(function(){
var targetClass = $(this).data('bind-to');
var targets = $('.' + targetClass);
//or $(this).closest('form').find('.' + targetClass)
//convert to int then bool
targets.toggle(!!+this.value);
});
.hide {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
Yes
<input type="radio" class="yes_no_radio" data-bind-to="some_class" value="1" name="yes_no">
</label>
<label>
No
<input type="radio" class="yes_no_radio" data-bind-to="some_class" value="0" name="yes_no">
</label>
<div>
<div>
FIELD A
</div>
<div class="some_class hide">
FIELD B
</div>
<div>
FIELD C
</div>
<div class="some_class hide">
FIELD D
</div>
Use Jquery attribute selector to bind events to controls.
Sample script.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
$('span[title="Yes"]>input', tr).change(function () {
if ($(this).is(":checked")) {
$("nobr:contains('Justification for urgency')").closest('tr').show();
}
})
$('span[title="No"]>input', tr).change(function () {
if ($(this).is(":checked")) {
$("nobr:contains('Justification for urgency')").closest('tr').hide();
}
})
var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
$('span[title="Yes"]>input', tr2).change(function () {
if ($(this).is(":checked")) {
$("nobr:contains('Brief description of client')").closest('tr').show();
}
})
$('span[title="No"]>input', tr2).change(function () {
if ($(this).is(":checked")) {
$("nobr:contains('Brief description of client')").closest('tr').hide();
}
})
});
</script>
Update:
<script type="text/javascript">
$(function () {
var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
$('span[title="Yes"]>input', tr).change(function () {
if ($(this).is(":checked")) {
$('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", false);
$("nobr:contains('Justification for urgency')").closest('tr').show();
}
})
$('span[title="No"]>input', tr).change(function () {
if ($(this).is(":checked")) {
//disable control
$('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", true);
//set text as NA
$('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).text("NA");
$("nobr:contains('Justification for urgency')").closest('tr').hide();
}
})
var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
$('span[title="Yes"]>input', tr2).change(function () {
if ($(this).is(":checked")) {
$('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", false);
$("nobr:contains('Brief description of client')").closest('tr').show();
}
})
$('span[title="No"]>input', tr2).change(function () {
if ($(this).is(":checked")) {
$('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", true);
$("nobr:contains('Brief description of client')").closest('tr').hide();
}
})
});
</script>
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!");
}
});
});
I created a radio button in which when user click on yes value then text box is shown to user otherwise they remain hide.
My question when user select yes then I am able to store yes value in sql but when user click on no value that value is not stored in datbase
<script>
$(document).ready(function(){
$(function() {
$('input[name="yeshave"]').on('click', function() {
if ($(this).val() == 'yes') {
$('#textboxes').show();
} else {
$('#textboxes').hide();
}
});
});
});
</script>
no radio button code:
<table>
<tr>
<td>Do you haver passport:</td>
<td><input type="radio" name="yeshave" value="yes"> Yes</td>
<td><input type="radio" name="yeshave" value="no"> No</td>
</tr>
</table>
SQL code is:
if(isset($_POST['yeshave']))
{
$selectedValue=$_POST['yeshave'];
}
$query = "INSERT INTO upload (name, size, type, image,passport_no,dateofissue,dateofexpiry,placeofissue, having_passport ) ".
"VALUES ('$fileName', '$fileSize', '$fileType', '$image','".$passno."','".$doi."','".$doe."','".$poi."','".$selectedValue."')";
mysqli_query($conn,$query) or die('Error, query failed');
Set check one of them. Try with -
$selectedValue = isset($_POST['yeshave']) ? $_POST['yeshave'] : 'no';
JavaScript:
$(document).ready(function() {
$('input[name="yeshave"]').on('click', function() {
$('#textboxes').toggle($(this).val() == 'yes');
});
});
In PHP:
$selectedValue = $_POST['yeshave'] ? $_POST['yeshave'] : 'no';
You don't need $(function() inside ready
Use toggle to hide/show #textboxes
In PHP, check if value is present, if not use default no
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 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);