i have 3 checkbox with same ID. When I try to do following in the javascript I get the output as 9. Can you see where am I going wrong?
onclick of checkbox; I calling a function --> chkBoxCount(this);
function chkBoxCount(chk){
alert(chk.id.length;}
EDIT:
<input type="checkbox" name="f_seizure" id="f_seizure_1" onclick="chkBoxCount(this);" value="0"> No known episode
<input type="checkbox" name="f_seizure" id="f_seizure_2" onclick="chkBoxCount(this);" value="1"> EEG
<input type="checkbox" name="f_seizure" id="f_seizure_3" onclick="chkBoxCount(this);" value="2"> Suspected/Clinical
You said that you expected 3 as result, so if i'm understanding, you want to count the number of checkboxes with the same name. This is how to do it, enjoy ^^
chkBoxCount = function() {
alert($("input[name=f_seizure]").length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="f_seizure" id="f_seizure_1" onclick="chkBoxCount();" value="0"> No known episode
<input type="checkbox" name="f_seizure" id="f_seizure_2" onclick="chkBoxCount();" value="1"> EEG
<input type="checkbox" name="f_seizure" id="f_seizure_3" onclick="chkBoxCount();" value="2"> Suspected/Clinical
It should be:
<input type="checkbox" name="vehicle" value="Bike" id="bike" onclick="chkBoxCount(this)" > I have a bike</input>
function chkBoxCount(chk){
var id = chk.id;
id = id.split("");
alert(id.length);
}
What this does is get the passed element's id, substring it into indivual characters, and then alert the number of characters. This has been tested; It works! Hope this helped!
Related
I have a list of check boxes with different values.
<input type="checkbox" value="55" id="myId">
<input type="checkbox" value="65" id="myId">
<input type="checkbox" value="75" id="myId">
<input type="checkbox" value="85" id="myId">
<input type="checkbox" value="95" id="myId">
When I'm getting those values using js that will take only value=55 only. It is due to the same id="myId"
var x = "";
$("input[type='checkbox']").change(fucntion(){
if(this.checked){
x = x+","+x;
}
});
When run that will load only 55 values like-: 55,55,55,55
Attribute id should be unique. You can use an array instead of string variable. Then simply add or remove item based on the check box status:
var x = [];
$("input[type='checkbox']").change(function(){
if(this.checked){
x.push(this.value);
}
else {
var index = x.indexOf(this.value);
x.splice(index, 1);
}
console.log(x.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" id="">55
<input type="checkbox" value="65" id="">65
<input type="checkbox" value="75" id="">75
<input type="checkbox" value="85" id="">85
<input type="checkbox" value="95" id="">95
First of all don't use multiple same ids on your page, id should be unique on entire page, try data attributes instead
$("input[type='checkbox']").change(function(){
var x = "";
$("[data-id=myId]").each(function(){
if(this.checked){
x = x + $(this).val() + ",";
}
});
console.log(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" data-id="myId">
<input type="checkbox" value="65" data-id="myId">
<input type="checkbox" value="75" data-id="myId">
<input type="checkbox" value="85" data-id="myId">
<input type="checkbox" value="95" data-id="myId">
If selection order isn't important can map() the checked values to new array every change
Your string concatenation approach doesn't take into account unchecking a previously checked input
$(':checkbox').change(function(){
var vals = $(':checkbox:checked').map(function(){
return this.value
}).get()
console.log(vals.join())
})
// insert values as text for demo
.wrap(function(){
return $('<label>',{text:this.value})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" >
<input type="checkbox" value="65" >
<input type="checkbox" value="75">
<input type="checkbox" value="85" >
<input type="checkbox" value="95" >
Note that ID's must be unique in a page
getAttribute, everything but not getting the text along perticula combobox.
I want to get the text along with each combobox.
<small>
<input type="checkbox" checked="checked" value="on" name="irOperations[0]"/>
Account Activity
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[1]"/>
Current Day Balances
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[2]"/>
Current Day Transactions
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[3]"/>
Prior Day Balances
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[4]"/>
Prior Day Transactions
<br/>
<li class="xc">
</small>
What you can do:
Wrap your text with <label></label>
Connect your text with your checkbox with an ID
Then you can get the innerHTML from that label
Example:
HTML
<input id="account-activity" type="checkbox" checked="checked" value="on" name="irOperations[0]">
<label for="account-activity">Account Activity</label>
JavaScript
document.querySelector('[for="account-activity"]').innerHTML
This will return an array with "name" as index and next content of it as value
var comboboxes = document.getElements('input[type="checkbox"][name]');
var output = [];
comboboxes.forEach(function(combobox) {
output[combobox.getAttribute('name')] = combobox.nextSibling.textContent.trim();
});
console.log(output);
or
document.getElement('input[type="checkbox"][name="irOperations[1]"]').nextSibling.textContent
Well you can't get innerHTML or getText of elements which are "self-contained" e.g <input />
One way you do it by using HTML5 data attributes and giving each element an ID:
<input type="checkbox" id="account_activity" data-detail="Account Activity" checked="checked" value="on" name="irOperations[0]"/>
Account Activity
<br/>
This way you can use following JS to get the value:
var combo_element = document.getElementById("account_activity");
alert(combo_element.getAttribute("data-detail"));
<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.
.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}
Give all the radio buttons in the group the same name.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>
I am trying to develop a setting page in jQuery for an app. in this page i have five check box as:
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="1"/>
<label for="checkbox1_0">One</label>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="2"/>
<label for="checkbox1_1">Two</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="3"/>
<label for="checkbox1_2">Three</label>
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="4"/>
<label for="checkbox1_3">Four</label>
<input type="checkbox" name="checkbox1" id="checkbox1_4" class="custom" value="5"/>
<label for="checkbox1_4">Five</label>
now how its possible to have a save button which by clicking, it saves the status of each check box and the sum of their values. so when the app is closed and then is opened again the changes are saved. for example one may chose check-boxes 1, 2 and 3 which should be saved and checked. also their sum in a constant like A = 1+2+3 = 6;
i would be really thankful if anyone could help me
<script type="text/javascript">
$(document).ready(function () {
$('.custom').click(function () {
var sum = 0;
$('.custom:checked').each(function () {
sum += parseFloat($(this).val());
});
alert(sum);
});
});
</script>
Instead of alert, you may set the sum value to anywhere you need
I would like to know how to add checkboxes on input type number change.
By default I have :
HTML CODE
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onkeydown="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
If I change my checkbox number to 2, I would like javascript/ajax add
<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">
Same as if I change my change number to 1, it has to remove one checkbox.
I already did same thing but with table (add one row or remove one row) but here i don't know how to add new element (on my first script I don't add new table, just new row)...
Need help to write my JS function change_cb()
EDIT TO GIVE YOU MY ANSWER
I find how to do this with DADE help (thank you DADE) :
HTML CODE (same)
<label for="cb_number">How many checkboxes ?</label>
<input id="cb_number" name="cb_number" type="number" size="1" maxlength="1" value="1">
<div class="my_cb_result"></div>
jQuery CODE
$(window).ready(function() {
$('#cb_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
$('label[class="to_del"]').remove();
for (var i=1;i<=number;i++) {
var data = '<label for="checkbox" class="to_del">Label of my checkbox</label><input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="'+i+'">';
}
$('.my_cb_result').append(data);
});
});
JSFiddle with comments
Try this:
var ele = '<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">';
document.getElementById("yourElementID").appendChild(ele);
HTML:
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="0">
<div class="inputs"></div>
JS:
$('#checkbox_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
for (var i=1;i<=number;i++) {
var data = '<input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="cb'+i+'">';
$('.inputs').append(data);
}
});
JSFiddle with comments
Do you mean if checkbox_number's value is set to "2" that you'd like to render the second checkbox?
If so, you should use onblur or similar on checkbox_number to run a function that will render the new one via a getElementById and appendChild.
IE:
<script type="text/javascript">
function change_cb() {
var secondCheckbox = '<input id="checkbox_number2" name="checkbox_number" type="number" size="1" maxlength="1" value="1" />";
document.getElementById("yourForm").appendChild(secondCheckBox);
}
</script>
<div id="yourForm">
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onblur="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
</div>
edit: From what you're posting, you shouldn't need Ajax, by the way.