Clone checkbox append and if check one the other uncheck - javascript

I want to make checkbox as radio but I not used radio I must be used checkbox but when I append checkbox it does not work as radio, plz how to set after appending checkbox as a radio,
code.
jQuery(function($){
$(".add").on('click', function(e) {
e.preventDefault();
var main_div = $('.append');
var new_offer = $("li:last", main_div).clone();
new_offer.appendTo(main_div);
});
$('input.check_one').on('change', function() {
$('input.check_one').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="append">
<ul>
<li>
<input type="checkbox" name="offer[key]" class="check_one">
</li>
</ul>
</div>
<button class="add">add</button>
</body>
</html>


You need to change the way you attach event listener
jQuery(function($){
$(".add").on('click', function(e) {
e.preventDefault();
var main_div = $('.append');
var new_offer = $("li:last", main_div).clone().prop('checked',false);
new_offer.appendTo(main_div);
});
$('.append').on('change','input.check_one', function() {
$('input.check_one').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="append">
<ul>
<li>
<input type="checkbox" name="offer[key]" class="check_one">
</li>
</ul>
</div>
<button class="add">add</button>
</body>
</html>

Related

JS - Get value on click event from dyamically added elements

I would like to get value on click event from dynamically added elements but something goes wrong.
My code is:
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer">
</div>
</body>
</html>
When I am clicking on the created dynamically div there is empty alert insted of myValue.
What should I change?

Try
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
Instead of
$(document).on("click", ".remove" , function() {
alert($(this).val());
});

this should work for you. ↓↓
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
});
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer"> </div>
</body>
</html>

Can`t hide html element that I generated with javascript with jquery

I want to create a to do list....the add and delete buttons work but i want to delete an element when i click on it...i tried with jquery but it doesnt work when i click on the javascript generated elements, but when i test on a html element that was initial on the page it works. What is the problem ? Here is the code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
<script>
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>

try this one:
$(document).ready(function(){
$("body").on("click","p", function(){
$("p").hide();
});
});
Snippet:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("body").on("click","p", function(){
$(this).hide();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
</body>
</html>

The p element doesn't exist till you click the button and run the function adauga(), so you can't bind the click event to an element that doesn't exist yet, You have to bind the click event in your adauga() function as below:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
$("p").click(function(){
$("p").hide();
});
}
or run the function when the page is ready:
$(document).ready(function(){
adauga();
$("body").on("click","p", function(){
$("p").hide();
});
});
attention: hide() function doesn't remove an element just change the display to none, if you want to remove the element from your dom use remove() function instead!!!

When your code runs the event-listeners of the p-elements, your elements doesn't exist, so they aren't evected by the registering of the event-listener. You have to add the event-listener after you created the p element. Try something like:
var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
$("p").hide();
});

Checkbox to .detach and then .prepend object

I want to use .detach and .prepend with a checkbox, I found this function that uses it with two buttons:
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x = $("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
But how can I use it with a check box? And when the checkbox is checked it prepend the elemento to the body, and when is unchecked detach the element.
Right now I am using fade in and fade out, but I want to change that to detach and prepend:
$('#toggle').change(function () {
if (!this.checked)
// ^
$('.content').fadeOut('slow');
else
$('.content').fadeIn('slow');
});

How about this:-
var x;
$('#toggle').change(function() {
if (!this.checked)
x = $('.content').detach();
else
$('body').append(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked="true" />
<div class="content">
content content content content content content content content content content content content
</div>

Check if this example helps you get a clarity.
$(document).ready(function() {
var p;
$("#trigger").change(function() {
if (this.checked) {
$('#mydiv').prepend(p);
p = null;
} else {
p = $("p").detach();
}
});
});
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="mydiv">
<p>Hello</p>
<p>you?</p>
</div>
Toggle:
<input type="checkbox" name="mycheckbox" id="trigger" checked/>
<script src="script.js"></script>
</body>
</html>

$(function () {
var myCheck = $('input[name=myCheck]'),
content = $('#content');
myCheck.change(function(){
if (myCheck.is(':checked')) {
content.prependTo(document.body);
} else {
content.detach();
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="content"><span>Content</span></div>
<label for="myCheck">
<input type="checkbox" name="myCheck" checked="true">
<span>My Check</span>
</label>
</body>
</html>

Jquery Menu Hide show

<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>Option
<optios></options
</select>
</div>
</li>
<ul>
</div>
Jquery :
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
});
Hide show works perfect, but when I click on Inner Select option within li even it closes.
I tried event.stopPropagation();
Any help ?

try this:-
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function(e){
e.stopPropagation();
})
});
Demo

Firstly there was error in your html. Updated your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>
<option>abc</option>
</select>
</div>
</li>
</ul>
</div>
</body>
</html>
Secondly, you must explicitly handle clicking of select to stop event propagation:
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function (e) {
e.stopPropagation();
});
});
See the plunkr

Try this one:
$(document).ready(function () {
$('.toolone').click(function (e) {
if(e.target !== this) {
return;
}
$(this).find('.plugin').toggle(200);
});
});

jQuery checkboxes error

I am making a form validation and I set the property of other checkboxes disable if the owner checkbox is not checked but it is not working.
Here's my html cod:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="script.js"></script>
<script src="min.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
<script>
</script>
</body>
</html>
and in it min.js is jQuery installation file and ,
here is script.js :
$(document).ready(function(){
var $checkbox = $("#check").find("input[type=checkbox]");
$checkbox.prop('disabled', true);
$("#owner").click(function(){
var $ownercheck = $(this);
if ($ownercheck.prop('checked') === true) {
$checkbox.prop('disabled', false);
}
else
{
$checkbox.prop('disabled', true);
}
});
});

You have to put min.js above the script.js,
and your html code will look like this :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="min.js"></script>
<script src="script.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
</body>
</html>

You must always load the library first. For issue to be fixed, script.js must go after min.js. Your code is working perfectly fine: http://jsfiddle.net/zb3m3/1/
<script src="min.js"></script>
<script src="script.js"></script>

Categories