This is my js code:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if($("#a").attr("checked")){
$("#a").attr("checked",false);
}else{
$("#a").attr("checked",true);
}
})
})
</script>
This is my html code :
<input type="checkbox" id="a">
<button>123</button>
I click the button on the browser, The checkbox only can switch status on first and second time.
But I do not think the issue of attr(), I have some code before can run Correctly.
$("#delete").click(function(){
if($("input[name='del_id[]']").attr("checked")){
$("input[name='del_id[]']").attr("checked",false);
}else{
$("input[name='del_id[]']").attr("checked",true);
}
});
Is there someone can help me ?
Use prop() instead of attr() like,
$("button").click(function () {
$("#a").prop("checked", !$('#a').prop('checked'));
});
Demo
Your code is correct if you use jQuery Version 1.8.3
$(document).ready(function(){
$("button").click(function(){
if($("#a").attr("checked")){
$("#a").attr("checked",false);
}else{
$("#a").attr("checked",true);
}
})
})
Fiddle
http://jsfiddle.net/YXkgm/1/
If you use above 1.8 use prop
$(document).ready(function(){
$("button").click(function(){
if($("#a").prop("checked")){
$("#a").prop("checked",false);
}else{
$("#a").prop("checked",true);
}
})
})
Fiddle
http://jsfiddle.net/YXkgm/
Related
I want to display the alert() after a new row is appended.
This is my code, but delegation is not working.
$(".tweet").each(function() {
alert("tweet alert");
});
$("button").click( function(){
$("#container").append("<div class='tweet'>tweet</div>");
});
$(document).delegate('click', function(){
$(this).addClass("tweet");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Im using a basic jquery version 1.4
In my code, the alert doesnt display at all! what am doing wrong? thank you.
You can add the alert inside the click handler like so:
$("button").click(function() {
$("#container").append("<div class='tweet'>tweet</div>");
alert("tweet alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
I want to use jquery to always hide an element when it is checked, and show the element when it is unchecked. After doing some research I found the "is" attribute and so I created a simple html file as:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p id="test">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<input type="checkbox" id="s">Click me</input>
</body>
</html>
Now for some reason, the jquery is not functional. Any help would be appreciated please. I also tried:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
And this doesn't work either.
This is simple in javascript. Please try the following:
var cb = document.getElementById('isAgeSelected');
var txtAge = document.getElementById('txtAge');
$(document).ready(function(){
cb.change= function(){
if(cb.checked) {
txtAge.style.display ='block';
} else {
txtAge.style.display ='none';
}
};
});
In JQuery, you can do the following:
$(document).ready(function(){
$('#s').on('change', function(){
if($(this).is(":checked")){
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
});
You are only checking the checkbox once after the DOM is ready instead you should do it on its change event
$("#s").change(function(){
if($(this).is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
You can do this using following jQuery onchange event and .checked function
$(document).ready(function(){
$('#s').change(function(){
if(this.checked)
$("#test").hide(); // checked
else
$("#test").show();
});
});
Working URL:: https://jsfiddle.net/qn0ne1uz/
Good question !
now you were almost there.
$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready)
if($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
What you want to do is monitor checkbox the whole time, like so:
$('#s').bind('change', function() {
if ($("#s").is(':checked'))
$("#test").hide(); // checked
else
$("#test").show();
});
example on jsfiddle
I'm guessing you are wanting to use the jQuery when the checkbox changes - at the moment you are just changing the hide / show it when the document loads.
Also ids need to be unique or jQuery will only get the first item with that id it comes to when you use the id selector. Change the test id to a class.
If you want the click me to change the state of the checkbox, turn it into a label (think you had it as a button) and target the input (using either for="input-id or wrap the label around the input and the text)
Try the following:
// this is to go in your document ready
$('#s').on('change', function() { // bind to the change event of the chackbox
// inside any change event, this is the js object of the thing that changed (ie the checkbox)
if (this.checked) {
$('.test').hide();
} else {
$('.test').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>
<!-- ids need to be unique so change this to a class or your jquery won't work -->
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>
<input type="checkbox" id="s"><label for="s">Click me</label>
I am trying to check whether or not a particular element has been clicked but am having trouble doing so. Here is my HTML:
<div id="my_special_id" class="switch switch-small has-switch" data-on="success" data-off="danger">
<div class="switch-on switch-animate"><input type="checkbox" checked="" class="toggle">
<span class="switch-left switch-small switch-success">ON</span>
<label class="switch-small"> </label>
<span class="switch-right switch-small switch-danger">OFF</span>
</div>
</div>
Here is my jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
</script>
I am guessing that my id "my_special_id" is not what is actually being clicked?
I guess click event should have event parameter.
$(document).ready(function() {
$('#my_special_id').click(function(e) {
if (e.target check condition) {
window.alert('ON!');
}
});
});
parameter 'e' above specified is the event object that has all info about click event.
so if u check all info under 'e.tartget', u will be able to find out which one is clicked.
Hope it's helpful for you.
Cheers :)
Since you are looking for a alert when the checkbox is clicked
$(document).ready(function() {
$('#my_special_id input.toggle').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
Demo: Fiddle
Simply put alert when you click on that particular class switch-on
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id div:first-child .switch-on').on('click',function() {
window.alert('ON!');
});
});
</script>
Or even try like
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($(this + 'div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
This JavaScript works for me.
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
alert("On!");
}
});
});
You are sure you have JQuery?
Your code looks fine I think either you have a syntax error somewhere else or you do not have JQuert.
does this alert?
$(document).ready(function() {
alert("Jquery works");
});
The click event will trigger to whatever you're bound do. the only time you'd have to be worried is if you bound to both a parent and child (e.g. you had listed #my_special_id,.switch-small--then you'd have to look at e.target).
With that said, you can use scope to limit how jQuery finds the div:first-child. I'm not 100% sure what you're after, but the below appears to do what you're after:
$(document).ready(function() {
$('#my_special_id').click(function() {
// look for div:first-child within `this` (where `this=#my_special_id`
// per the .click selector above)
if ($('div:first-child',this).hasClass('switch-on')) {
window.alert('ON!');
}
});
});
If you're looking to bind to the on/off separately, you may want to change it around a bit. we can still check for .switch-on, just have to traverse differently:
// here we bind to the on/off buttons and not the container
$('#my_special_id .switch-small').click(function(){
// you want the facsimilee of `div:first-child`, so (because we're now
// within that node, we use .parent() to get back up to it
var $firstChild = $(this).parent();
if ($parent.hasClass('switch-on')){
alert('ON!');
}
});
I want to put the radio button value in the status div. The text of status div should change, according to the radio button selected by the user.
The code that I used bellow is not working. Please help. Thanks!
HTML code:
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<div id="status"></div>
</form>
JS code:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked');)
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type='radio']:checked').val()
$('#status').text(RadioStatus);
});
});
This should work:
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
A few minor adjustments to your code got it to work just fine:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked'))
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type="radio"]:checked').val();
$('#status').text(RadioStatus);
});
});
see: http://jsfiddle.net/f6Tru/
..or you can really simplify it by using techfoobar's:
$(document).ready(function () {
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
});
instead. see: http://jsfiddle.net/RrhYM/
You have a problem in your single quotes '
Change:
RadioStatus= $('input[type='radio']:checked').val()
To:
RadioStatus= $('input[type="radio"]:checked').val()
Try this code
$('input[name ^=sex]').click(function() {
$('#status').text($(this).val());
});
demo
$("input:radio").click(function() { //use $("input:radio[name='sex']").click if more radio buttons there
$('#status').text($(this).val());
});
Simply use change to determine that a radio button is selected. Then use html or text to append the value of chosen radio button to your <div id="status">.
$(document).ready(function () {
$('input[type=radio]').on("change", function() {
$('#status').html($(this).val());
// Alternative
// $('#status').text($(this).val());
});
});
DEMO
You may achieve that with the following JS code :
$("input").click(function(e){
var selectedValue = e.currentTarget.value;
$('#status').html(selectedValue );
});
I have html like this:
<html>
<input type='button' name='button1' id='button1'>
<input type='button' name='button2' id='button2'>
</html>
What I want to do that when User click button2, it should remove button1 element and show a message on its place. It will look like this after button2 click event.
<html>
Button1 Removed
<input type='button' name='button2' id='button2'>
</html>
If you use jquery, you can do that:
$('#button2').click(function() {
$('#button1').replaceWith('Button1 Removed')
});
$(document).ready(function(){
$("#button1").click(function(){
$("#button1").replaceWith("<div>Hi der</div>");
});
});
If you were using jquery then this solution:
$('#button2').click(function(){
$('#button1').replaceWith('<p>Button1 Removed</p>');
});
$('#button1').click(function() {
$('this').remove().html('<p>Button 1 Removed</>')
alert('button1 removed');
});
$(document).ready(function(){
$("#button2").click(function(){
$("#button1").replaceWith("Button1 Removed");
});
});
Using jQuery with an embedded function that can also do other things.
$('#button2').click(function() { $('#button1').remove().html('<p>Button 1 Removed</>') });
Remember its good practice to always enclose text in some tags like etc