Change checkbox checked with JavaScript - javascript

I am trying to change a part of my html code with JavaScript, but I can't get it to work:
function trigger(){
document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox" checked>";
}
function triggerOff(){
document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox">";
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>
So if I press the button I want to add the checked status to my HTML and if I press the other button I want to remove the checked status.
Is this even possible?
All help is highly appreciated ! Thanks a lot guys!

You cannot set innerHTML to input type checkbox. Use the checked property to check/uncheck the checkbox
function trigger(){
document.getElementById('mycheckbox').checked = true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked = false;
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>

Use checked property, like this:
function trigger(){
document.getElementById('mycheckbox').checked=true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked=false;
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>

Just do it like that
function trigger(){
document.getElementById('mycheckbox').checked = true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked = false;
}
The innerHTML property will create inside your mycheckbox another input element

Related

Uncheck checkbox on button press without resetting form

I've got a button which I want to reset three form inputs.
I've managed to clear the two text inputs (input 1 and input 2) but the checkbox won't clear.
<button id="reset">reset</button>
Here is my script:
<script type="text/javascript">
document.getElementById('reset').onclick= function() {
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;
var field= document.getElementById('agreecheckbox');
field.value= field.defaultValue;
};
</script>
This is the structure you need. I added the onclick directly on the button and created a function(myFunctionName). I added a form around your button and checkbox because we are processing form data. THen check to see if the checkbox is checked with this method. if not it sets checked as empty.
CSS
function myFunctionName(){
if(document.getElementById('agreecheckbox').checked == true){
document.getElementById('agreecheckbox').checked = '';
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;
}}
HTML
<form id="formName" method="post">
<button onclick="myFunctionName();" type="button" id="reset">reset</button>
<input type="checkbox" checked="" id="agreecheckbox">
</form>
Try doing like this
document.getElementById("agreecheckbox").checked = false;
This is a simple example to reset checkbox with jquery.
This Solutions checks if the id reset has been clicked, if so removes the checked attribute from the checkbox id.
$(function(){
$("#reset").click(function(){
$("#chkbox").removeAttr('checked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="reset">reset</button>
<input id=chkbox type=checkbox checked>
try changing to
var field= document.getElementById('agreecheckbox');
field.checked= false;
We are setting the checkbox property checked to false.
If you want to change it to true, you can set field.checked=true;
document.getElementById('reset').onclick= function() {
var field= document.getElementById('agreecheckbox');
field.checked= field.defaultValue;
};
<input id="agreecheckbox" type="checkbox">
<button id="reset">reset</button>

Dynamic Checkbox selector in jquery

I have a series of dyanmic checkboxes which are creating at runtime but with differnt Ids like this (patter is same)
ModellingTagID_1201
ModellingTagID_1202
ModellingTagID_1203
ModellingTagID_1204
I want to know that above check box change or not? how can i make a dyanmic event with dynamic selector? so that i can get that particular checkbox value has changed? is this kind of thing possible?
$jqLib("#ModellingTagID_*").change(function(){
var lastState =$jqLib("#ModellingTagAlternativePlanning").prop("disabled");
$jqLib("#ModellingTagAlternativePlanning").prop("disabled",!lastState);
});
you can apply same class to all those checkboxes
<li><input type="checkbox" id="yourcbid1" name="x" value="1" class="yourcbclass" /> cb1</li>
<li><input type="checkbox" id="yourcbid2" name="x" value="1" class="yourcbclass" /> cb2</li>
and then you can make function for it's change event like this.
$(function(){
$('.yourcbclass').on('change', function() {
if($(this).is(':checked'))
{
//do your stuff here
}
});
});
see if this helps..
Very simple using this way:--
$("#envoyer").click(function(e) {
var myArray = [];
$(":checkbox:checked").each(function() {
myArray.push(this.value);
});
if(myArray == ''){
alert('Please check');
}else{
alert("Checked: " + myArray.join(","));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
one<input type="checkbox" name='checkbox0' value="one_name" checked>
two<input type="checkbox" name='checkbox1' value="one_name1">
three<input type="checkbox" name='checkbox2' value="one_name2">
<input type="button" id="envoyer" value="Envoyer Reponse" />
</body>
</html>
From what I understand, your issue is to distinguish the unique id of the checkbox, which is being, changed. To achieve this, you can simply add a common class to all the elements, alongwith unique random ids.
cb_1<input type="checkbox" class="someclass" id='ModellingTagID_1201' value="value_1" checked>
cb_2<input type="checkbox" class="someclass" id='ModellingTagID_1202' value="value_2">
cb_3<input type="checkbox" class="someclass" id='ModellingTagID_1203' value="value_3">
And then you can simply bind a change event listener to the common class, and fetch the value of the random id, which has been changed, from inside the event listener.
$(document).ready(function(){
$('.someclass').on('change', function() {
alert($(this).attr("id"));
});
});

How to remove space after using remove() function jquery

I'm making reminder app here is the interface
Now when i click the "All Checked" button all the check boxes removes. I'm using remove() function for that but after removing these check boxes the space remains there, and when I'm putting the new value it's coming after that space. I was trying trim function but its not working
MY HTML
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
MY JAVASCRIPT
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').trim();
});
MY JAVASCRIPT FOR INPUT VALUES
$('<label><span>' +
'<input type="checkbox" id="checkboxSuccess" value="option1">' +
input.val().toUpperCase() +
'</span></label><br/>').appendTo('.checkbox');
event.preventDefault();
Looks Like This
Try this,
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').html('');
});
Another option you can use by using some CSS like,
.checkbox label{
display:inline-block;
margin:2px 0;
}
And no need to add <br/> after your dynamically added label's.
And some jquery code like,
$('#allFinished').click(function(){
$('.checkbox label').remove();
});
Try
$('#allFinished').click(function(){
$('.checkbox').find('*').remove();
// $('.checkbox').empty();
});
Please try this :
Use .empty(); method
$('#allFinished').click(function(){
$('span').empty();
});
Reference
Demo
This is what you need to code
DEMO
HTML
<input type=text />
<input type=button value=Submit />
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
CODE
$(document).ready(function(){
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').empty();
});
$(":button[value=Submit]").click(function(){
var input=$(":text");
$('<label><span>' + '<input type="checkbox" id="checkboxSuccess" value="option1">' + input.val().toUpperCase() + '</span></label><br/>').appendTo('.checkbox');
});
});
Think about your markup first. Try to come up with a structure which allows you identify a whole block of your checkboxes with its label, the input itself and whatever element you want to associate with this checkbox.
Something like this:
<div class="checkbox-wrapper">
<label>
Blablub
<input type="checkbox" value="1" />
</label>
</div>
Now in your click event you could loop through all your checkboxes (elements with your identifiying class checkbox-wrapper) and remove the whole element if its checkbox is checked:
$(document).ready(function(){
$('#allFinished').on("click", function(){
$(".checkbox-wrapper").each(function(){
if($(this).find("input[type=checkbox]").prop("checked")){
$(this).remove();
}
});
});
});
Working Demo: https://jsfiddle.net/n1o3t3nz/1/

Change a button value via Jquery

Sorry but I'm quite a noob if it comes to Javascript with HTML.
I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.
Example:
If one checkbox is checked = Button: Delete 1 row
If two checkboxes are checked = Button: Delete 2 rows
etc.
And I want this to happen automaticly when I check all checkboxes. The only problem is that it won't change anything.
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click( function() {
$("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows");
});
</script>
HTML:
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
The server-side of this(PHP) does work(deleting the rows).
Thank you for helping and your time!
First you must put your code inside this block:
$(document).ready(function(){
// your code
});
We use this because:
The document.ready handler is triggered when the DOM has been loaded
by the browser and ready to be manipulated.
Second:
<input type="submit" name="submit" class="btn js-button btn-success" value="Verwijder" />
$(".js-button").val("Value that you need");
Try this.
Fiddle Demo
HTML
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
JS Code
$('input[type="checkbox"]').on('change', function(){
var rows = $('input[type="checkbox"]:checked').length,
value = rows < 1 ? 'Verwijder' : 'Delete '+rows+(rows<2 ? ' row':' rows');
$('.btn').attr('value', value);
});

Checkboxes with anchors

I have a ton of check-box's that are linked to anchors. When a check-box is clicked it goes to that anchor which is in the same page. Is there a better way to code this? I have about 50 check-box's so this function is packed with if statements.This is the working code for 2 of them:
<input type="checkbox" id="1" value="1" onclick="return send();"/>
<input type="checkbox" id="2" value="2" onclick="return send();"/>
<script>
function send(){
if(document.getElementById('1').checked){
window.location='#buy';
return false;
}
if(document.getElementById('2').checked){
window.location='#order';
return false;
}
//and this function goes on and on and on...
return true;
}
</script>
And then in the page where I want it to go has
<a name="buy"></a>
<a name="order"></a>
jQuery will save your nerves here:
$('input:checkbox').click(function () {
windows.location = $(this).attr('value');
});
Simply make sure you change the anchors to match the checkboxes.
If you added the hash into the value of the input like so:
<input type="checkbox" id="2" value="buy" onclick="return send(this);"/>
You could do it like so
<script>
function send(input)
{
if(input.checked)
{
window.location = input.value;
return true;
}
return true;
}
</script>
If that doesn't work you could also switch out the value to use ID or even a custom attribute. Whatever suits your fancy.
HTML:
<input type="checkbox" id="checkbox1" value="1" data-target="buy" onclick=" send(this)">
<input type="checkbox" id="checkbox2" value="2" data-target="order" onclick="send(this)">
Javscript:
function send(el){
var target = '#' + el.getAttribute('data-target');
window.location = target ;
}

Categories

Resources