Select / Deselect All Checkboxes using jQuery in Thymeleaf - javascript

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);

Related

On click button Check and Uncheck multiple radio buttons via Jquery

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);
});

How to load content from another php page using jQuery .load() function?

I'm using a simple .load() function from Jquery to load a div element with id from another file in the same folder when changing the selected option in selector. But I can't make it work. Nothing happens when I change the selected option the server gives error "No such file or directory" and My alert ("Before load") does work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<select id="productType" onchange="load_special_data()">
<option id="Book" selected>Book</option>
<option id="DVD">DVD</option>
<option id="Furniture">Furniture</option>
</select>
<div id="specialData"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#productType").change(load_special_data());
});
function load_special_data()
{
var selected_id = $("#productType option:selected").attr("id");
alert("Before load");
try {
jQuery("#specialData").load('form_special_data.php #Book', null, function (responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
} catch (e) {
alert(e.message);
}
}
</script>
</html>
Content of form_special_data.php:
<div id="Book">
<label for="weight">Weight (KG) </label>
<input type="number" required class="form-control" name="weight" id="weight">
<small>Please provide book weight in KG</small>
</div>
<div id="Furniture">
<label for="height">Height (CM) </label>
<input type="number" required class="form-control" name="height" id="height">
<label for="width">Width (CM) </label>
<input type="number" required class="form-control" name="width" id="width">
<label for="length">Length (CM) </label>
<input type="number" required class="form-control" name="length" id="length">
</div>
First of all, you shouldn't invoke the load_special_data function more than once.
Remove the onchange="load_special_data()", and leave it like this:
<select id="productType">
Put all the JQuery related functions inside the jQuery(document).ready(function(){ ...
Like this:
jQuery(document).ready(function() {
jQuery("#productType").change(load_special_data());
function load_special_data() {
var selected_id = $("#productType option:selected").attr("id");
alert("Before load");
try {
jQuery("#specialData").load('form_special_data.php #Book', null, function (responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
} catch (e) {
alert(e.message);
}
}
});
About the No such file or directory error, that's one of the easiests errors to fix. Verify that the file name and path are correct.
Finally, I don't know what's your final goal here, but I'd use AJAX instead of "load" because it's more practical and easier to use.

how to detect input language for creating slug, if not English then slug input remain empty using javascript

i am trying to take title input and create slug using it. But if the title is not written in English like "আমার প্রথম পোস্ট" then the slug input will remain empty. The code is given below. hope someone can help. Not good at javascript .
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '-');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>
I have modified your code to do what I believe you're after, these are the main changes:
Wait for the document to be loaded with $(document).ready()
I've expanded your regex to allow numbers and spaces as valid English /^[a-zA-Z0-9 ]+$/ (There's a lot more you can add to this, it's quite difficult to detect exactly what is valid English)
You were creating an event listener inside your if, instead of actually executing the code (You can listen for multiple events by including them in the .on('keyup blur') string)
$(document).ready(function() {
$('#title').on('keyup blur', function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val())) {
var titleInput = $(this).val().toLowerCase().trim().replace(/[^a-z0-9-]+/g, '-');
$('#slug').val(titleInput);
} else {
$('#show_lang_in_here').text('Different language');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
What you are doing is replacing by -
If you want to remove everything, change it to TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>

Onchange event in a bootstrap checkbox

I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.
Any hint would be much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle</title>
<link href="./css/github.min.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/stylesheet.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap-toggle.js"></script>
</head>
<body>
<div id="events" class="container">
<h3>API vs Input</h3>
<p>This also means that using the API or Input to trigger events will work both ways.</p>
<div class="example">
<input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOnOff('#chk1','on')">On by API</button>
<button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')">Off by API</button>
<div id="console-event"></div>
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<script>
function fonctionTest(){
console.log("This is a test");
}
function toggleOnOff(selector,state){
console.log("element : " + selector);
console.log($(selector).prop('checked'));
$(selector).bootstrapToggle(state);
}
function toggleOn() {
$('#chk1').bootstrapToggle('on');
isOnOrOff();
}
function toggleOff() {
$('#chk1').bootstrapToggle('off');
isOnOrOff();
}
function isOnOrOff(){
var c=document.getElementById('chk1');
console.log(c.checked);
}
</script>
</div>
</body>
</html>
The documentation says to use jQuery change.
Demo:
$('#chk1').change(function() {
alert($(this).prop('checked'))
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" checked data-toggle="toggle">
Its working for all the checkboxes as shown in the examples below:
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'));
console.log("Change event: " + this.id);
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" data-toggle="toggle">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
EDIT:
Add the code like:
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()">
function fonctionTest(){
if (document.getElementById('chk1').checked)
{
alert("Checked")
} else
{
alert("Not Checked")
}
}

Jquery Index reporting wrong index

Html:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" ><label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" ><label for="radio-percentage">Percentage</label>
</div>
</body>
</html>
Javascript:
$("input[type=radio][name=dataChange]").on("change", function(){
console.log($("input[type=radio][name=dataChange]").filter(":checked").index())
});
I expect the indices to be 0 and 1, but they are 0 and 2. Why?
Demo: http://jsbin.com/xifutarumu/edit?html,js,console,output
From the docs: "If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" >
<label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" >
<label for="radio-percentage">Percentage</label>
</div>
The radio-percentage input is the third of its siblings, and therefore has an index of two.
Passing this as the context for index() seems to produce the desired results. shrug
$("input").index(this);
See http://jsbin.com/wuzoxocura/1/edit?html,js,console,output
It is showing correctly index as
0:first input
1:label just after 1 input
2:second input

Categories