Develop Reference

How to implement “select all” check box

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

Validate checkbox using JavaScript.

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

tetxtbox enable/disable on checkbox select/unselect using Javascript

I have a table with three columns and multiple rows. 2nd and third column consist of a textbox(first child of a container) and a checkbox respectively.
Textbox
<td class="SBS1 c4">
<input class="Medium InputText" type="text" name="QR~QID33#1~1~1~TEXT" id="QR~QID33#1~1~1~TEXT" value="" disabled="">
<label class="offScreen" for="QR~QID33#1~1~1~TEXT">&nbsp; - &nbsp; - hh</label>
</td>
Checkbox
<td class="SBS2 c7">
<input type="checkbox" id="QR~QID33#2~1~1" name="QR~QID33#2~1~1" value="Selected">
<label class="q-checkbox q-checked" for="QR~QID33#2~1~1"></label>
<label class="offScreen" for="QR~QID33#2~1~1">&nbsp; - 󠆺random text</label>
</td>
I have to disable and enable the textboxes in each row on checkbox check and uncheck respectively using javascript. but there seem to be some pagelifecycle issues with the script I am using. Here is the Javascript that I am using in my Qualtrics survey JS interface,
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
var count=document.getElementsByClassName("q-checkbox").length;
for(var i=0;i<count;i++)
{
document.getElementsByClassName("q-checkbox")[i].parentNode.addEventListener("click",hideFunc);
}
function hideFunc()
{
console.log(this.className);
if(this.classList.contains("checkers"))
{
//this.classList.toggle("checkers");
this.previousSibling.previousSibling.previousSibling.firstChild.disabled="false";
this.classList.add("checkers");
return;
}
else
if(!(this.classList.contains("checkers")))
{
this.previousSibling.previousSibling.previousSibling.firstChild.disabled="true";
this.classList.remove("checkers");
return;
}
}
});
I am just trying to toggle or add/remove the class "checkers"and setting "disabled" property of the texboxes accordingly. The code above in HideFunc is one of the work-around I have tried but it is not working.
Is there another way to check for checkbox change?

As the first comment hinted, a better approach is to check the status of the checkbox rather than add/remove a class. Also, making use of prototypejs makes it easier. Try this:
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
$(qid).select('tr.Choice').each(function(choice,idx) { //loop through each row
var cbox = choice.select('td.SBS2').first().down(); //cbox enables 1st question in row
var txtEl = choice.select('td.SBS1').first().down(); //text input to be enabled/disabled
if(cbox.checked == false) { //initialize text input disabled status
txtEl.value = null; //blank text input
txtEl.disabled = true; //disable text input
}
cbox.on('click', function(event, element) { //enable/disable text input on cbox click
if(cbox.checked == false) { //unchecked
txtEl.value = null; //blank text input
txtEl.disabled = true; //disable text input
}
else { //checked
txtEl.disabled = false; //enable text input
}
}); //end on function
}); //end row loop
});

This is another solution I could come up with ,apart from the correct solution by T. Gibbons
var $j= jQuery.noConflict();
$j("td.SBS2 ").click(function(){
$j(this).closest("tr").find(".InputText").prop("disabled",$j(this).children("input")[0].checked);
$j(this).closest("tr").find(".InputText").prop("value","");
var len=document.getElementsByClassName("InputText").length;
for(var i=0;i<=len;i++)
{
document.getElementsByClassName("InputText")[i].style.width="300px";
}
});

On clicking the textbox the selectRow checkbox function should not work

. .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

How to automatically uncheck checkbox if textbox is filled

I've made the checkbox to be default check. How can I uncheck the checkbox automatically if certain textfield is filled. I've thinking of using javascript.
I tried using this
<input type="text" name="commentID" id="commentID" onkeyup="userTyped('skipID', this)"/>
<input type="checkbox" name="skipID" value="N" id="skipID" checked="checked" />
and the javascript
function userTyped(commen, e){
if(e.value.length > 0){
document.getElementById(commen).checked=false;
}else{
document.getElementById(commen).checked=true;
}}​
It works but how if i have 3 textfield, and I want the checkbox to be filled only after all textfield is filled.

Just do this:
<input type="checkbox" id="someid" checked="checked"/>
<textarea onchange="if (this.value != '') document.getElementById('someid').checked = false;"></textarea>

if(document.getElementById('yourtextBox').value!=' ')
{
document.getElementById('checbox').checked=false;
}

Try the following code. In this code, each time when you type a character in the textfield, the function will be called and the length of the textfield value is not zero, the checbox will be unchecked and it will be checked while you clear your textfield
//Function get called when you type each letter
function OnChangeTextField(){
//getting the length of your textbox
var myLength = $("#myTextbox").val().length;
if(myLength > 0){
$("#myCheckbox").attr("checked", false);
}else{
$("#myCheckbox").attr("checked", true);
}
}
<input type = "text" id = "myTextbox" onkeyup= "OnChangeTextField();"/>
<input type="checkbox" id = "myCheckbox" value = "true" checked = "checked"/>

$("#comment").on("keyup blur", function () {
$("#box").prop("checked", this.value == "");
});
EDIT: You can also use jQuery

$("#comment").on("keyup blur", function() {
$("#box").prop("checked", this.value == "");
});
Try jQuery, This works for me...