We Keep Coding

how to get the value of checkboxselected in javascript

This is my java script
<script>
$(document).ready(function () {
$('#btnSubmit').on('click', function (e) {
var cnt = $("input[name='technologies']:checked").length;
var cnt1 = $("input[name='technologies']:checked").val();
alert(cnt1);
if (cnt < 3) {
for (i = 0; i < $("input[name='technologies']:checked").length; i++) {
var cnt2 = cnt1.val(i);
alert(cnt2)
}
alert(cnt);
e.preventDefault();
}
else
alert('Well Done!!!!');
});
});
</script>
My html code
<input type="checkbox" name="technologies" value="JavaScript" />JavaScript <br />
<input type="checkbox" name="technologies" value="Prototype" /> Prototype<br />
<input type="checkbox" name="technologies" value="Dojo" /> Dojo<br />
<input type="checkbox" name="technologies" value="Mootools" /> Mootools <br /></div></td></tr></table>
I need the values of checked in forloop statement. Unable to get the checked values, i am getting only one checked value

You're confused as to what returns an array and what doesn't.
var elms = $("input[name='technologies']:checked")
for (i = 0; i < elms.length; i++) {
var cnt2 = elms[i].val();
alert(cnt2)
}
elms is an array, whose elements can by accessed by index.

Function is not defined - jsf/javascript

I'm not able to call my javascript function. I've tried in the onChange SelectMenu now and tag ajax, but both are giving the following message:
Message: 'sumarFilas' is not defined.
Follows function and jsf with the function call:
<script language="javascript">
var numfilasRelacion=1;
var form=document.theForm;
var valorNRN="";
function sumaRelacion() {
var miTablaRelacion = document.getElementById("form:j_idt115_panel");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var celda5 = document.createElement("td");
numfilasRelacion=miTablaRelacion.getElementsByTagName("tr").length + 1 ;
celda1.innerHTML = "<p:inputText id='inicioRango' />";
celda2.innerHTML = "<p:inputText id='finalRango' />";
celda3.innerHTML = "<p:inputText id='numeroGrupoId' />";
celda4.innerHTML = "<p:inputText id='checkpto'/>";
celda5.innerHTML = "<p:inputText id='checkptoH'/>";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
miTablaRelacion.appendChild(fila);
}
function restarFilas(rangos) {
var miTablaRelacion = document.getElementById("form:j_idt115_panel");
var i = numfilasRelacion-1;
do{
miTablaRelacion.deleteRow(i);
numfilasRelacion=numfilasRelacion-1;
i=i-1;
}
while (miTablaRelacion.rows.length != rangos)
}
function sumarFilas(){
alert("sumarFilas");
var numfilas=numfilasRelacion;
var rangos = document.getElementById("form:j_idt115_panel").value;
if(rangos>numfilas){
for(var i=0;rangos-numfilas>i;i++){
sumaRelacion();
}
}else{
restarFilas(rangos);
}
}
</script>
The jsf:
<h:outputText value="Nº Intervalo a Portar:" />
<p:selectOneMenu value="#{bean.parametro.intervalo}">
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
<f:selectItem itemLabel="4" itemValue="4" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
<f:selectItem itemLabel="7" itemValue="7" />
<f:selectItem itemLabel="8" itemValue="8" />
<f:selectItem itemLabel="9" itemValue="9" />
<f:selectItem itemLabel="10" itemValue="10" />
<f:ajax event="change" onevent="sumarFilas"></f:ajax>
</p:selectOneMenu>
<h:panelGrid columns="6" style="margin-bottom:10px" cellpadding="5"
id="pgrid121">
<h:outputText value="Portabilidade Grupo" id="pg1" />
<p:selectBooleanCheckbox
value="#{bean.parametro.portabilidadeGrupo}" id="pg11" />
<h:outputLabel for="numInicial1" value="Nº Inicial Int:" id="ni1" />
<p:inputText id="numInicial1" value="#{bean.parametro.numInicial}" />
<h:outputLabel for="numFinal1" value="Nº Final Int:" id="nf1" />
<p:inputText id="numFinal1" value="#{bean.parametro.numFinal}" />
<h:outputLabel for="idGrupo1" value="Id do Grupo:" id="ig1" />
<p:inputText id="idGrupo1" value="#{bean.parametro.idgrupo}" />
<h:outputText value="PTO" id="pt1" />
<p:selectBooleanCheckbox value="#{bean.parametro.pto}" id="pt11" />
</h:panelGrid>
Thanks!

You try to generate JSF code with javascript. Javascript runs after the server process the whole jsf page, generate html, and then sends the rendered html response to the browser. Browser could not process JSF code itself, it is completely out of JSF lifecycle.

Try to change your function as follows
function sumarFilas(data){
if (data.status === 'success') {
alert("sumarFilas");
var numfilas=numfilasRelacion;
var rangos = document.getElementById("form:j_idt115_panel").value;
if(rangos>numfilas){
for(var i=0;rangos-numfilas>i;i++){
sumaRelacion();
}
}else{
restarFilas(rangos);
}
}
}
Let me know if it works for you...
Also , take a look a this BalusC answer
ajax call in jsf 2.0 (myfaces), the onevent javascipt function in the ajax tag gets called before the rendering is complete

How to set grid combo box value in javascript?

I have combobox in grid itemtemplate how can i set the value in javascript
<telerik:GridTemplateColumn AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%"
HeaderStyle-Width="80px" HeaderText="Fault" ReadOnly="true" ShowFilterIcon="false"
SortExpression="FAULT" UniqueName="FAULT">
<ItemTemplate>
<telerik:RadComboBox ID="cmbFault" runat="server" AllowCustomText="false" HighlightTemplatedItems="true"
Skin="Outlook" Visible="true" Width="70px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="NF" Value="N" />
<telerik:RadComboBoxItem runat="server" Text="VF" Value="V" />
<telerik:RadComboBoxItem runat="server" Text="CF" Value="C" />
<telerik:RadComboBoxItem runat="server" Text="DF" Value="D" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
<HeaderStyle Width="80px" />
</telerik:GridTemplateColumn>
My java script
function vishali(){
if (difference > 5) {alert("enter into if");
document.getElementById('<%=cmbFault.ClientID %>').value = 'C';
}
else {
alert("enter into else");
document.getElementById('<%=cmbFault.ClientID %>').value = 'S';
}
}
but it is not working it is saying that cmbFault is not found in the context error please help me on this

You can do below javascript code in order to set from javascript.
function setCombo() {
var combo = $find("<%= cmbFault.ClientID %>");
combo.set_text("S");
}
And also you can have a look http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html

To get the control inside GridTemplateColumn do the following.
JS:
function setCombo() {
var grid = $find("<%=RadGrid1.ClientID%>");
var tableView = grid.get_masterTableView();
var items = tableView.get_dataItems();
for(var i = 0; i<items.length; i++){
var rowValues = items[i];
var Textvalue=rowValues.findElement("cmbFault");//access Combobox
}
}

Check all checkboxes with JavaScript

I want to have the first checkbox that allows me to check or uncheck all of the other boxes. Here is the code I am using:
<html>
<head>
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsById('checkall');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
</head>
<body>
<input type='checkbox' onClick='toggle(this)' /><br />
<input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br />
<input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br />
<input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br />
<input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br />
<input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br />
</body>
</html>

This has worked for me.
function toggle(oInput) {
var aInputs = document.getElementsByTagName('input');
for (var i=0;i<aInputs.length;i++) {
if (aInputs[i] != oInput) {
aInputs[i].checked = oInput.checked;
}
}
}
Though, if you want to limit this to only certain checkboxes, add a classname to them, and to the master checkbox
<html>
<head>
<script type="text/javascript">
function toggle(source) {
var aInputs = document.getElementsByTagName('input');
for (var i=0;i<aInputs.length;i++) {
if (aInputs[i] != source && aInputs[i].className == source.className) {
aInputs[i].checked = source.checked;
}
}
}
</script>
</head>
<body>
<input type='checkbox' class='checkall' onClick='toggle(this)' /><br />
<input type='checkbox' class='checkall' name='orders[0][order_id]' value='16885' /><br />
<input type='checkbox' class='checkall' name='orders[1][order_id]' value='17006' /><br />
<input type='checkbox' class='checkall' name='orders[2][order_id]' value='17006' /><br />
<input type='checkbox' class='checkall' name='orders[3][order_id]' value='17007' /><br />
<input type='checkbox' class='checkall' name='orders[4][order_id]' value='17011' /><br />
</body>
</html>

The problem is you are using the same id for all the checkbox groups. An id must be unique to a page. Instead you may use the checkbox name. Since the names have [] with varying values, you can use indexOf to examine just the first part.
<html>
<head>
<script language="JavaScript">
function toggle(source) {
// Get all input elements
var inputs = document.getElementsByTagName('input');
// Loop over inputs to find the checkboxes whose name starts with `orders`
for(var i =0; i<inputs.length; i++) {
if (inputs[i].type == 'checkbox' && inputs[i].name.indexOf('orders') === 0) {
inputs[i].checked = source.checked;
}
}
}
</script>
</head>
<body>
<input type='checkbox' onClick='toggle(this)' /><br />
<input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br />
<input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br />
<input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br />
<input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br />
<input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br />
</body>
</html>

Try this...
<form id="form_">
<input type='checkbox' name='item1' value='16885' />
<input type='checkbox' name='item1' value='17006' />
<input type='checkbox' name='item1' value='17006' />
<input type='checkbox' name='item1' value='17007' />
<input type='checkbox' name='item1' value='17011' />
<br/>Select All
<br/>Clear All
<button id="btnRemove1"><br/>Remove</button>
</form>
<script>
$("#select_all1").click(function() {
var item = document.getElementsByName("item1");
for (var i=0; i < item.length; i++) {
item[i].setAttribute("checked");
}
});
$("#clear_all1").click(function() {
var item = document.getElementsByName("item1");
for (var i=0; i < item.length; i++) {
if(item[i].checked) {
item[i].removeAttribute("checked");
} else {
alert("Nothing to clear.");
return false;
}
}
});
$("#btnRemove1").click(function() {
var items = $('.item1').is(':checked');
if(items) {
window.location = "/contents?"+ $("form#form_").serialize();
}
else {
alert("Nothing to remove.");
return false;
}
});
</script>

It's better to use the querySelectorAll. here is the example.
The Html with checkboxes
<input type="button" value="Select All" onclick="selectAll()" id="TestAll" />
<input type='checkbox' id='checkAll' name='Test1' />
<input type='checkbox' id='checkall' name='Test2' />
<input type='checkbox' id='checkAll' name='Test3' />
<input type='checkbox' id='checkAll' name='Test4' />
<input type='checkbox' id='checkAll' name='Test5' />
Here is the javascript for this
function selectAll() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox')
checkboxes[i].checked = true;
}
}

IDs are supposed to be unique - never have more than one HTML element with the same id, it's invalid. That's also why you have a problem - there is no such method as document.getElementsById, only document.getElementById. Instead, you could use classes. Here's how to solve your problem in pure JavaScript:
function toggle(source) {
var inputs = document.getElementsByTagName('input');
var i, input;
for(i = 0; input = inputs[i]; i++) {
if((' ' + input.className + ' ').indexOf(' checkall ') > -1) {
input.checked = source.checked;
}
}
}
And change all your id="checkall"s to class="checkall".
Or you could use jQuery. It's great and does all things ;)

You can simply wrap all checkboxes that you nead itterate throu into the DIV and access to it's childNodes and use getElementById to access that DIV
<head>
<script language="JavaScript">
function toggle(source) {
//use getElementById to access to DOM objects by ID
var checkboxes = document.getElementById('checkall').childNodes;
var source = document.getElementById('source');
//now just itterate throu all checkboxess that is in the 'checkall' DIV
for(var i in checkboxes) {
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<!--Give an ID to the source checkbox so we could access it from Javascript-->
<input id="source" type='checkbox' onClick='toggle(this)' /><br />
<!--Just wrap all checkboxes that you nead to itterate into the DIV-->
<div id="checkall">
<input type='checkbox' name='orders[0][order_id]' value='16885' /><br />
<input type='checkbox' name='orders[1][order_id]' value='17006' /><br />
<input type='checkbox' name='orders[2][order_id]' value='17006' /><br />
<input type='checkbox' name='orders[3][order_id]' value='17007' /><br />
<input type='checkbox' name='orders[4][order_id]' value='17011' /><br />
</div>
</body>
</html>

Getting message: 'THIS' is undefined with simple box checking

I have 1 checkbox that when checked or unchecked will check or uncheck a specific number of other checkboxes. I have it for 3 simple checkboxes but I keep getting 'THIS' is undefined. I'm testing in firefox 7 and ie 8. Here is the html code:
<SCRIPT LANGUAGE="JavaScript">
function check(field, varstring, caller)
{
var arrvars = varstring.split(" ");
if (caller == "Check All")
{
for (i = 0; i < field.length; i++)
{
for(j=0; j<arrvars.length; j++)
{
if(field[i].value==arrvars[j])
field[i].checked = true;
}
}
return "Uncheck All";
}
else
{
for (i = 0; i < field.length; i++)
{
for(j=0; j<arrvars.length; j++)
{
if(field[i].value==arrvars[j])
field[i].checked = false;
}
}
return "Check All";
}
}
</script>
<form>
<INPUT STYLE="WIDTH: 13PX; HEIGHT: 13PX; VERTICAL-ALIGN: MIDDLE;" RUNAT="SERVER" TYPE="CHECKBOX" ID="CKALL2" NAME="CKALL2" TITLE="CHECK ALL" ONCLICK ='THIS.TITLE=CHECK(THIS.FORM.V_I, "X718 X1384 X2096", THIS.TITLE)' />
<br /><br />
<INPUT RUNAT="SERVER" TYPE=CHECKBOX DISABLED TITLE="1920" />
<INPUT RUNAT="SERVER" TYPE="CHECKBOX" ID="V_I" NAME="V_I" VALUE="X718" TITLE="1921" />
<INPUT RUNAT="SERVER" TYPE="CHECKBOX" ID="V_I" NAME="V_I" VALUE="X1384" TITLE="1922" />
<INPUT RUNAT="SERVER" TYPE="CHECKBOX" ID="V_I" NAME="V_I" VALUE="X2096" TITLE="1923" />
</form>

JavaScript variables and keywords are case-sensitive.
Use this.title=check(...) instead of THIS.TITLE=CHECK(...).