As per the image I want to check and uncheck radio button as all present and all absent. I have written some code but it works only once.
$(document).on('click', '#btn_all_absent', function(e){
$("input:radio[class^=present]").each(function(i) {
$(this).attr('checked',false);
});
$("input:radio[class^=absent]").each(function(i) {
$(this).attr('checked',true);
});
});
$(document).on('click', '#btn_all_present', function(e){
$("input:radio[class^=absent]").each(function(i) {
$(this).attr('checked',false);
});
$("input:radio[class^=present]").each(function(i) {
$(this).attr('checked',true);
});
});
Please suggest me where I am wrong.
Your code is working well for this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div>
<button id="btn_all_present"></button>
<input type="radio" class="present" />
<input type="radio" class="present" />
<input type="radio" class="present" />
<input type="radio" class="present" />
<input type="radio" class="present" />
<input type="radio" class="present" />
<input type="radio" class="present" />
</div>
<br />
<button id="btn_all_absent"></button>
<div>
ABSENT
<input type="radio" class="absent" />
<input type="radio" class="absent" />
<input type="radio" class="absent" />
<input type="radio" class="absent" />
<input type="radio" class="absent" />
<input type="radio" class="absent" />
<input type="radio" class="absent" />
</div>
</body>
<script>
$(document).on("click", "#btn_all_absent", function (e) {
$("input:radio[class^=present]").each(function (i) {
$(this).attr("checked", false);
});
$("input:radio[class^=absent]").each(function (i) {
$(this).attr("checked", true);
});
});
$(document).on("click", "#btn_all_present", function (e) {
$("input:radio[class^=absent]").each(function (i) {
$(this).attr("checked", false);
});
$("input:radio[class^=present]").each(function (i) {
$(this).attr("checked", true);
});
});
</script>
</html>
It worked for me like this.
$(document).on('click', '#btn_all_absent', function(e){
$("input:radio[class^=present]").prop('checked', false);
$("input:radio[class^=absent]").prop('checked', true);
});
$(document).on('click', '#btn_all_present', function(e){
$("input:radio[class^=absent]").prop('checked', false);
$("input:radio[class^=present]").prop('checked', true);
});
Related
I am trying to add the function of selecting and deselecting all fields. What I have now doesn't work for me and I don't know why? Does anyone know why?
.....
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Report</title>
<script>
$("#selectAll").click(function() {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
</script>
</head>
....
<label for='selectAll'><input id="selectAll" type="checkbox">Select All </label>
<input checked="checked" type="checkbox">Test</label>
<label th:each="item : ${userConfig.isEnableMap}">
<input checked="checked" type="checkbox" th:text="${item.key}" th:field="*{isEnableMap['__${item.key}__']}"/>
</label>
I added changes and it works now
<script>
$(document).ready(function () {
$("#selectAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
You can try :
$("input[type=checkbox]").prop("checked",true);
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');
So I check normalize to add normalize library...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
I check jQuery and I add the jQuery source after normalize...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
but instead I get....
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
So basically what I check I want that library to add after the other libraries I check.
My jQuery is...
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
I believe this can happen without Codemirror, and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.
$(document).ready(function() {
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
});
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.
$(document).ready(function() {
$(".check").on("change", function() {
var textarea = $('.full-library-code');
var value = $(this).nextAll('input:first').val() + '\n';
if( $(this).prop('checked') == true )
textarea.val( textarea.val() + value );
else
textarea.val( textarea.val().replace( value, "") );
});
});
/* only for demo readability */
textarea { width: 500px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br />
<input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br />
<input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br />
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >
If you're getting the element in reverse order, simply use the reverse() method before the join(), like so:
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).reverse().join('\n');
});
What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that
$(".check").on("change", function() {
var $textArea = $(".full-library-code");
var fullLibraryCode = $textArea.val();
var thisValue = $(this).next().next().val() + "\n";
if (this.checked) {
$textArea.val(fullLibraryCode + thisValue);
} else {
$textArea.val(fullLibraryCode.replace(thisValue, ""));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
I'm creating a checkbox to enable multiple textbox. If it is checked, it will enable and disabled by default.
Javascript code :
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
}
});
});
HTML code :
<input type="checkbox" id="sccb" name="science" value="science">
<input type="text" id="cns" name="coornamescience" disabled="disabled" size="30" />
<input type="text" id="cns2" name="coornamescience" disabled="disabled" size="30" />
<input type="text" id="cns3" name="coornamescience" disabled="disabled" size="30" />
It works on jsfiddle, but it doesn't work in a .html file, please help.
you have forgotten to add jquery ?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
}
});
});
</script>
</head>
<body>
<form ...>
Your form here
</form>
</body>
</html>
hello i am new at html i am designing a quiz in html. this is example with 2 questions only.when i click a submit button i want to calculate marks show it in a alert box and then go to result.htm page .but when i click submit alert box shows answer but page is not redirected forward to result.htm.
my code is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.d1
{
background-color:#FFFFCC;
}
#Submit1
{
width: 67px;
}
</style>
<script language="javascript" type="text/javascript">
function Submit1_onclick() {
var i = 0;
var a = document.getElementById("Radio1");
if (a.checked == true) {
i++;
}
var b = document.getElementById("Radio8");
if (b.checked == true) {
i++;
}
alert(i);
}
</script>
</head>
<body>
<p>
</p>
<form name="f1" method="post" action="d://result.htm">
<div class="d1">
Q1 What is your name ?
<br />
a <input id="Radio1" name="R1" type="radio" value="t" />
b <input id="Radio2" name="R1" type="radio" value="f" />
c <input id="Radio3" name="R1" type="radio" value="f" />
d <input id="Radio4" name="R1" type="radio" value="f" /></div>
<br /> <br /> <br />
<div class="d1">
Q1 What is your Id ?
<br />
1 <input id="Radio5" name="R11" type="radio" value="V1" />
2 <input id="Radio6" name="R11" type="radio" value="r1" />
3 <input id="Radio7" name="R11" type="radio" value="as1" />
4 <input id="Radio8" name="R11" type="radio" value="pop1" /></div>
<br /> <br /> <br />
<div class="d1">
<input id="Submit1" type="submit" value="submit" onClick="return(Submit1_onclick())"/><br />
<br /> <br />
</form>
</body>
</html>
As the last line of your function call
<script language="javascript" type="text/javascript">
function Submit1_onclick() {
var i = 0;
var a = document.getElementById("Radio1");
if (a.checked == true) {
i++;
}
var b = document.getElementById("Radio8");
if (b.checked == true) {
i++;
}
alert(i);
location.href="result.htm";
}
</script>
This will redirect the page
Change your markup to this:
<input id="Submit1" type="submit" value="submit" onclick="Submit1_onclick();"/>
and add this to your javascript:
function Submit1_onclick() {
...
alert(i);
return true;
}
Returning true from an event handler will tell the browser to continue the default behavior (in this case, submit the form).
Sounds like you're trying to submit a POST between two static files in an IIS server, which you can't do. You can change the files to .aspx and it should work as expected.