Here is my html and javascript, want to auto check on click of button and oncheck want to trigger some more actions. Tried with 'click' and 'change' event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#4').on('click', function(){
$('#1').prop('checked', true).trigger('click');
$('#2').prop('checked', true).trigger('click');
});
$('#1').on('click', function(){
if($('#1').is(':checked')){
$('#3').prop('disabled','disabled');
}
else{
$('#3').prop('disabled','');
}
});
});
</script>
</head>
<body>
<label>
<input id="1" type="checkbox" value="">Yes</label><br><br>
<label>
<input id="2" type="checkbox" value="">NO</label><br><br>
<label>
<input id="3" type="text" value="Hello World">Yes</label><br><br>
<input id="4" type="button" value="Submit"/><br><br>
</body>
</html>
Something like this should get you started.
var onYesChecked = function() {
if($('#1').is(':checked')){
$('#3').prop('disabled',true);
} else{
$('#3').prop('disabled',false);
}
};
var onNoChecked = function() {
// your NoChecked logic here
};
$(document).ready(function(){
$('#4').on('click', function(){
// `.prop('checked', true)` will check the checkbox.
// Triggering click will immediately uncheck the checkbox
// (simulating a user click).
// $('#1').prop('checked', true).trigger('click');
// $('#2').prop('checked', true).trigger('click');
$('#1').prop('checked', true);
$('#2').prop('checked', true);
onYesChecked();
onNoChecked();
});
$('#1').on('click', onYesChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="1" type="checkbox" value="">Yes
</label>
<br><br>
<label>
<input id="2" type="checkbox" value="">NO
</label>
<br><br>
<label>
<input id="3" type="text" value="Hello World">Yes
</label>
<br><br>
<input id="4" type="button" value="Submit"/>
Related
Im getting the result now, but what I want is to Also get the checked input box and put into the input text not just only using on change event in jQuery but also on page loads. As you can see, one of the checkboxes below has been checked but not putting into the input text. Please see my code below:
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
</div>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3">3
</div>
You can do this easily like:
$(document).ready(function() {
$checks = $(":checkbox");
$checks.on('change', setResults);
function setResults() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
$('#field_results').val(string);
}
setResults();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3" checked>3
You should set values into input at first, try this:
$(document).ready(function() {
$checks = $(":checkbox");
$('#field_results').val(getCheckedValues());
$checks.on('change', function(){
$('#field_results').val(getCheckedValues());
});
});
function getCheckedValues(){
$checks = $(":checkbox");
var valuse = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
return valuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3" checked>3<br>
<input type="checkbox" value="4">4<br>
<input type="checkbox" value="5" checked>5<br>
The easiest way to do it You can use .trigger() to set default value
$checks.trigger('change');
I have a page with multiple checkboxes in varying states (checked or unchecked) . I'm trying to enable a button as soon as any of the checkbox values change state.
Here is my code so far but it doesn't seem to work properly yet:
var checkboxes = $("input[type='checkbox']");
checkboxes.change(function(){
$('#saveChanges').prop('enabled', true);
});
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
$('#saveChanges').prop('disabled', false);
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<button id="saveChanges" disabled>Save</button>
</body>
</html>
Try, where submit button would be..
<input type="submit" value="Do thing" disabled>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
Try,
<input class="myCheckBox" type="checkbox" value="true">
<input class="myCheckBox" type="checkbox" value="true">
<button type="submit" id="confirmButton">BUTTON</button>
var checkboxes = $('.myCheckBox');
checkboxes.on('change', function ()
{
$('#confirmButton').prop('disabled', !checkboxes.filter(':checked').length);
}).trigger('change');
I want allow selection of only 1 checkbox.
I am using the following script:
$(document).ready(function(){
$('#valores input').on('change', function() {
$('#valores input').not(this).prop('checked', false);
});
});
And HTML:
<div id="valores">
<div><input type="checkbox" name="valor" id="50reais" class="css-checkbox"/><label for="50reais" class="css-label radGroup1">R$ 50,00</label></div>
<div><input type="checkbox" name="valor" id="100reais" class="css-checkbox"/><label for="100reais" class="css-label radGroup1">R$ 100,00</label></div>
<div><input type="checkbox" name="valor" id="150reais" class="css-checkbox"/><label for="150reais" class="css-label radGroup1">R$ 150,00</label></div>
<div><input type="checkbox" name="valor" id="200reais" class="css-checkbox"/><label for="200reais" class="css-label radGroup1">R$ 200,00</label></div>
<div><input type="checkbox" name="valor" id="250reais" class="css-checkbox"/><label for="250reais" class="css-label radGroup1">R$ 250,00</label></div>
<div><input type="checkbox" name="valor" id="outroValor" class="css-checkbox"/><label for="outroValor" class="css-label radGroup1">Outro Valor</label></div>
</div>
Only works while the page is loading. After ready stops working.
Solved! There was an unnecessary script that I had left in the code and was causing this problem.
Thanks for all!
Sounds like your page may be updating dynamically after load.
Change it to use a delegated event handler, attached to a non-changing ancestor element:
$(document).ready(function(){
$(document).on('change', '#valores input', function() {
$('#valores input').not(this).prop('checked', false);
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/hrahs1gu/
Also view your page DOM (e.g. Chrome F12 DOM inspector) after loading, so see if the elements are what you expect.
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app2.js"></script>
</head>
<body>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
</label>
</div>
</body>
</html>
Javascript code
$(document).ready(function(){
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
console.log($box);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
});
I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});
How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(
function()
{
$("#companyNameText").keyup(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keyup(
function()
{
$("#companyCountryLabel").html(this.value);
});
});
function showEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeIn('slow', function(){
$(this).css('display', 'inline');
});
}
function hideEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeOut('slow', function(){
$(this).css('display', 'none');
});
}
</script>
<body>
<div id="preview">
<fieldset>
<label id="companyNameLabel" class="workExperience">
This is my company
</label>
<label id="companyCountryLabel" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit" onclick="showEditionBlock();"/>
</fieldset>
</div>
<div id="edit" style="display:none;">
<fieldset>
<label>Company Name: </label>
<input type="text" id="companyNameText" />
<label>Company Country: </label>
<input type="text" id="companyCountryText" />
<input type="button" value="Ok" onclick="hideEditionBlock();"/>
</fieldset>
</div>
</body>
</html>
You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:
document.getElementById("companyNameText").value =
document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
document.getElementById("companyCountryLabel").innerHTML;
Using jQuery, this is the same:
$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());