I am trying to assign a value of 5 if a checkbox is clicked first and a value of 2 for the second checkbox that is selected. The form is meant to have a primary and secondary selection based on the order that the box is checked. What I have below doesn't seem to work.
<input type="checkbox" class="form" value="2" name="option-1">
<input type="checkbox" class="form" value="2" name="option-2">
<script type="text/javascript">
var firstClick = true;
$('input.form').click(function() {
if(firstClick){
firstClick = 5;
});
</script>
Update:
I tried Samuel's method but the form is still returning a value of 2 for each item.
you forgot to change the flag
you need to set the val in the checkbox
Modified code:
<input type="checkbox" class="form" value="2" name="option-1">
<input type="checkbox" class="form" value="2" name="option-2">
<script type="text/javascript">
var firstClick = true;
$('input.form[type=checkbox]').click(function() {
if(firstClick) {
$(this).val(5);
firstClick = false;
}
});
</script>
Related
<script>
$(document).ready(function(){
var value = $('input[name="yesno"]').change(function(){
if($('#imageCheck').prop('checked')){
// alert('Image Option checked!');
}else if($('#textCheck').prop('checked')){
// alert('Text Option Checked!');
}
});
});
</script>
<input type="radio" onclick="javascript:imageTextCheck();" name="yesno"
id="imageCheck"/>   <b>Text</b>
<input type="radio" onclick="javascript:imageTextCheck();"name="yesno"
id="textCheck"/>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
how i can save the value of radio button in hidden field. If i Click on image it saves image value.
$(document).ready(function(){
var value = $('input[name="yesno"]').click(function(){
$('#radioCheck').val($(this).val());
});
setInterval(() => console.log( $('#radioCheck').val() ), 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="yesno" value="imageCheck" id="imageCheck"/><label for="imageCheck">imageCheck</label>
<br />
<input type="radio" name="yesno"value="textCheck" id="textCheck"/><label for="textCheck">textCheck</label>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
hope this one helps you :)
the setInterval is just to print out the hidden field's value each and every second so when you click on a radio button you can see that it sets the hidden input's value
Here is a simple solution for your problem: I have written one sample of code to explain the problem:
First: OnClick of radio button save the value of radio button if it is checked.
var radioValue = $("input[name='yesno']:checked").val();
Second: Assign the checked radio button value to the hidden input field.
$(document).ready(function(e) {
$("input[type='radio']").click(function(){
var radioValue = $("input[name='yesno']:checked").val();
if(radioValue) {
$("#radioCheck").val(radioValue);
console.clear();
console.log($("#radioCheck").val());
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_radioButton">
<input id="image_radio_check" value="imageButtonChecked" type="radio" class="radio_button" name="yesno" /> Image Radio Button
</div>
<div class="text_radioButton">
<input id="text_radio_check" value="textButtonChecked" type="radio" class="radio_button" name="yesno" />Text Radio Button
</div>
<div class="hidden_input">
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
</div>
Hope this may hep you in solving your problem.
I have a dynamically created table that is filled with rows and columns of checkboxes.
Their unique id's are dynamically created as well.
I would like to store the order that the checkboxes are checked by the user in the checkboxs' values.
If a checkbox is unchecked, its value should be reset to "" or to "0".
It doesn't matter how many times a checkbox is checked and unchecked.
I only need the ultimate order, so an incrementing variable should work fine.
For example:
There are checkbox1 - checkbox10 and all their values are initially set to "".
If the user first clicked on checkbox3 its value would be set to "1".
If the user then clicked on checkbox5 its value would be set to "2".
If the user then clicked on checkbox8 its value would be set to "3".
If checkbox3 and checkbox5 were unclicked, their values would be reset to "".
If checkbox3 were checked yet again its value would be set to "4".
It would not matter that there was no checkbox with a value of 1 or 2.
https://jsfiddle.net/a6fm7h9h/
$(document).ready(function() {
var checkboxChecks = 1;
$('input[type=checkbox]').on('change', function() {
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="" name="cb1" />
<input type="checkbox" value="" name="cb2" />
<input type="checkbox" value="" name="cb3" />
<input type="checkbox" value="" name="cb4" />
<input type="checkbox" value="" name="cb5" />
<input type="checkbox" value="" name="cb6" />
<input type="checkbox" value="" name="cb7" />
<input type="checkbox" value="" name="cb8" />
<input type="checkbox" value="" name="cb9" />
<input type="checkbox" value="" name="cb10" />
You could do this:
If you don't have jQuery on your website, add this code first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
And then, add this (which should do the trick without any modifications):
<script>
var myCount = [];
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
if($(this).is(":checked")) {
myCount.push($(this).attr('id'));
$(this).val(myCount.indexOf($(this).attr('id'))+1);
}else{
delete myCount[myCount.indexOf($(this).attr('id'))];
$(this).val("");
}
});
});
</script>
Hope this works, let me know!
Cheers
Just drawing from what others posted, this seems to work fine.
$(document).ready(function() {
var checkboxChecks = 10001;
$('.myTablesClass').on('change', 'tr td .myInputsClass', function(){
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});`
i have one checkbox and two radio buttons. when i check the checkbox.i want both the radio buttons to enable and when i uncheck the checkbox i want both the radio button to get disable
below is the code which i have tried
<script>
function myfunction()
{
var radio=document.getElementsByName("disableme");
var len=radio.length;
for(var i=0;i<len;i++)
{
radio[i].disabled=true;
}
}
</script>
Notification
<input type="checkbox" onclick=myfunction() checked>
<input type="radio" name="disableme" id="1"> open
<input type="radio" name="disableme" id="2">close
You should check if checkbox is checked - in order to do that you can pass the element when your calling the function.
see example below
<script>
function myfunction(el) {
var radio=document.getElementsByName("disableme");
var len=radio.length;
for(var i=0;i<len;i++) {
radio[i].disabled=!el.checked;
}
}
</script>
Notification
<input type="checkbox" onclick=myfunction(this) checked>
<input type="radio" name="disableme" id="1">open
<input type="radio" name="disableme" id="2">close
Have a form using multiple checkboxes with a class of 'test' (only one of which can be checked however similar to using radio buttons - not my idea btw!).
When the form is submitted I want to get the value of the checkbox that is checked and store it in a variable - can anyone help here?
Cheers!
Chris
$("form").submit(function() {
var aVariable = $('input.test[type="checkbox"]:checked', this).val();
});
.val() returns undefined if called on an empty jQuery object, which would be the case here if no checkboxes are checked.
Please try below solution on codebins:
Note: Add latest jquery.js javascript file on header tag first.
HTML:
<form id="frm1" method="post">
<input type="radio" class="test" checked="checked" value="radio1">
Radio1
<input type="radio" class="test" checked="checked" value="radio2">
Radio2
<input type="radio" class="test" value="radio3">
Radio3
<br/>
<input type="checkbox" class="test" checked="checked" value="check1">
Check1
<input type="checkbox" class="test" value="check2">
Check2
<input type="checkbox" class="test" checked="checked" value="check3">
Check3
<br/>
<input type="submit" value="submit" />
</form>
jQuery within Script tag:
$(function() {
$("#frm1").submit(function() {
$("input.test[type=checkbox]:checked").each(function() {
alert($(this).val());
});
return false;
});
});
I have done above bin on http://codebins.com/bin/4ldqpap
this will work
$(function() {
$("#frm1").submit(function() {
$("input.test[type=checkbox]:checked").each(function() {
alert($(this).val());
});
return false;
});
});
var inputElements = document.getElementsByClassName('messageCheckbox');
var checkedValue=[];
for(var i=0; inputElements[i]; ++i){
console.log(inputElements[i]);
if(inputElements[i].checked){
checkedValue.push(inputElements[i].value);
}
}
alert(checkedValue)
In the script below, how do I get the values of only radio buttons and checkboxes that have been selected and not all (provided a radio button and checkbox were selected).
Right now it gives me the values of all, whether selected or not, and also the submit button (which i dont need).
How do i do this? There'll be more checkboxes and radio buttons, i've used only 2 sets for this question.
<html>
<head>
<script type="text/javascript">
function DisplayFormValues()
{
var str = '';
var elem = document.getElementById('frmMain').elements;
for(var i = 0; i < elem.length; i++)
{
str += elem[i].value+"<br>";
}
document.getElementById('lblValues').innerHTML = str;
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain">
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">
<input type="button" value="Test" onclick="DisplayFormValues();" />
</form>
<hr />
<div id="lblValues"></div>
</body>
</html>
Add the following test:
if(elem[i].checked)
str += elem[i].value+"<br>";
Also, if you use jQuery, the whole script is even simpler:
function DisplayFormValues(){
$("input:checkbox:checked").add("input:radio:checked")
.each(function(){
$("div#lblValues").append(this.value + "<br>");
});
}