Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
Related
I want to show the following message when the button below is clicked using jQuery
<p class="msg-confirm" id="msgConf">
Great! You got this. Let's continue.
</p>
Button:
<input type="button" value="Start" class="btn-start" id="exec">
This message is set as none in CSS:
.msg-confirm{
display: none;
}
I have this function that worked before on a similar context, but without the validation. If the checkbox below is checked, I want this function working.
$("#exec").click(function(){
if($('#d3').is(':checked')){
$("#msgConf").show('slow');
}
});
Checkbox:
<input type="radio" name="image" id="d3" class="input-step1 aheadF1"/>
Let's make use of the simplicity of some of the new features of jQuery such as the .prop() method that will allow us to verify if a checkbox or radio button is checked. For the purpose of this example, I switched the input to a checkbox since it is more appropriate UX/UI wise speaking, however, this property can be verified in both controls. We will use the toggleClass() method of jQuery to toggle the class that hides the P tag and its content initially. I certainly hope this helps.
Happy coding!
$(document).ready(function () {
$("#exec").click(function () {
if ($('#d3').prop('checked')) {
$("p").toggleClass("msg-confirm");
} else {
alert("Please select the checkbox to display info.");
}
});
});
.msg-confirm {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="msg-confirm">
Great! You got this. Let's continue.
</p>
<input type="button" value="Start" class="btn-start" id="exec">
<input type="checkbox" name="image" id="d3" class="input-step1 aheadF1"/>
Try this
$("#exec").on("click",function (){
if($('#d3').is(':checked')){
$("#msgConf").css("display","")
}
})
I want to display the same div with different heading by checkbox hide/show.
$('#cbxShowHide').click(function() {
this.checked ? $('#block').show(1000) : $('#block').hide(1000);
});
#block {
display: none;
background: #eef;
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide" />
<label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1" />
<label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2" />
<label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>
in the above example on clicking on checkbox "Show/Hide"I am able to display the text "Some text here".
I want to do this for nth checkbox so that I can show "some text here" nth time like "some text here1", "some text here2"
refer the this jsfiddle. I have moved the content inside div in span
$('#cbxShowHide1').click(function(){
$('#block span').text("yyour new text for this div")
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
Hope this helps
You are getting the click event only for a specific ID "cbxShowHide"
I changed it so the event would be from all input which ever is clicked
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('[type~=checkbox]').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>
First thing is that you need to use a class instead of an ID, then it will do that function for each individual checkbox,
Secondly remember that a for tag is specific to an ID so if you link an label to a checkbox make sure the two match.
Hope this example helps
$('.checkbox').click(function(){
if($(this).attr('id') == 'cbxShowHide')
{
$('#block').text('Some text here')
}
if($(this).attr('id') == 'cbxShowHide1')
{
$('#block').text('Some text here1')
}
if($(this).attr('id') == 'cbxShowHide2')
{
$('#block').text('Some text here2')
}
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>
Not so elegant, but i don't have much time..i hope i got what you meant
CSS
#block, #block1, #block2 {display:none;background:#eef;padding:10px;text-align:center;}
HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block"><span>Some text here</span></div>
<div id="block1"><span>Some text here 1</span></div>
<div id="block2"><span>Some text here 2</span></div>
JS
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000);
});
$('#cbxShowHide1').click(function(){
this.checked?$('#block1').show(1000):$('#block1').hide(1000);
});
$('#cbxShowHide2').click(function(){
this.checked?$('#block2').show(1000):$('#block2').hide(1000);
});
Try this Jsfiddle :jsfiddle.net/xs523nw8/6/
$("input[type='checkbox']").click(function(){
if($(this).is(":checked")){
$(this).siblings("input[type='checkbox']").removeAttr("checked");
$("#block").text('Some Text Here :'+$(this).index());
$("#block").show(1000)
}
else{
$("#block").hide(1000);
}
});
Check this fiddle https://jsfiddle.net/tz5ror3s/
I have added a class in checkboxes and bind click event on them and printing text inside block span.
$('.cbxShowHide').click(function() {
$('#block span').text('Some text here ' + $(".cbxShowHide:checked").length );
$('#block').show();
});
1. Toggling element's text
fiddle
Case: you want to just toggle the #block element text.
Fiddle uses type='radio' inputs rather than type='checkbox', as you have only one place where you toggle text, so selecting only one option at the time is better way to do it.
2. Showing elements based on checked checkboxes
fiddle
Case: you want multiple boxes hidden/shown based on checkbox input state(checked/unchecked).
On every state change, it loops through the checkboxes and:
For every checked one, it selects box with the same number and shows it
For every unchecked one, it select box with the same number and hides it
I have a datepicker in a div with class pickergroup, I have 3 datepicker in my page, and this is why I use a group and different names
<div class="pickergroup">
<input type="text" name="day1" id="day1"/> /
<input type="text" name="month1" id="month1"/> /
<input type="text" name="year1" id="year1"/>
<input type="hidden" id="date1" name="date1"/>
<div id="datepicker1" name="calendar"></div>
</div>
In my jquery I want to detect when clicking the id wich starts with "datepicker", I guess something like:
$(document).on('click', '.pickergroup id^="datepicker"', function() {
$(".pickergroup").find('[id^="datepicker"]').datepicker({
//my datepicker code
});
});
but this is not correct.
how can I do it?
The problem is how you're selecting the element inside of the event handler.
$(".pickergroup").find('[id^="datepicker"]')
means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from
.pickergroup id^="datepicker"
to
.pickergroup [id^="datepicker"]
$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
var $this = $(this); // The div that was clicked
console.log($this.text());
});
.pickergroup div {
float: left;
margin-right: 1em;
width: 200px;
height: 200px;
background: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
<div id="datepicker1">A</div>
</div>
<div class="pickergroup">
<div id="datepicker2">B</div>
</div>
<div class="pickergroup">
<div id="datepicker3">C</div>
</div>
<div class="pickergroup">
<div id="can-t-click-me">D</div>
</div>
First of all, the datepicker element needs to be an input. And remember, ID's are unique. If you using starts with selector, it is ok. But please dont get confusing with this.
Second, why need seperate fields? You could use one datepicker, decide the format you want to display and you could also parse the returned value from the datepicker in the format you need/want. Please have a look at the documentation.
I am trying to replace three check boxes within an html form with three different images. The idea being that the user can select the pictures by clicking on them rather than clicking on a check box. I've been putting togther some code but can't figure out how to make all the checkboxes selectable. At the moment only the first images works when it is clicked on. Can anyone help me? I'm a real novice with javascript I'm afraid. See fiddle here
The form
<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic1" value=9></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic2" value=12></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic3" value=7></div>
<input type="submit" name="submit" value="Add" />
</div>
</form>
The javascript
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
Why use JavaScript at all? You can do this with CSS, the :checked attribute and a label element.
input[type=checkbox] {
display: none;
}
:checked+img {
border: 2px solid red;
}
<label>
<input type="checkbox" name="checkbox" value="value">
<img src="http://lorempixel.com/50/50/" alt="Check me">
</label>
This is happening because you're using the same ID more than one. IDs should be unique. Instead of using id="blr", try using class="blr". I updated the fiddle:
http://jsfiddle.net/0rznu4ks/1/
First, as Amar said, id should be unique. Use classes for multiple elements.
Also pay attention for semicolons and closing html tags.
To your question:
use the function .siblings() to get the relevant checkbox element.
$('.blr').on('click', function () {
var $$ = $(this);
if (!$$.is('.checked')) {
$$.addClass('checked');
$$.siblings('input.imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$$.siblings('input.imgCheck').prop('checked', false);
}
});
See demo here:
http://jsfiddle.net/yd5oq032/1/
Good luck!
With selected the hasClass validation works correctly.
<div class="row dis">
<input class="contact button selected" value="Contact Us">
</div>
However if i remove the selected through jquery:
<div class="row dis">
<input class="contact button" value="Contact Us">
</div>
if (!$('.dis > .contact').hasClass('disabled')) {
$("input.contact").click(function() {
alert('---');
$('.contact').addClass('disabled');
});
}
the hasClass still not find the disabled class after $('.contact').addClass('disabled');.
So, i only want the first alert.
Demo:
http://jsfiddle.net/dWGNJ/2/
You could do it like this..
$('input.contact').on('click',function(){
if( !$(this).hasClass('disabled') )
{
alert('---');
$(this).addClass('disabled');
}
});
Basically, when input.contact is clicked, check if it has the class .disabled - if it doesn't then trigger the alert and add the class .disabled - which in turn prevents it from triggering the second time it's clicked
Or you could have a slightly more elegant way of doing it:
$('.dis').on('click','input.contact:not(.disabled)',function(){
alert('---');
$('.contact').addClass('disabled');
});
Same concept.
There's no .disabled element when your JS runs, so, no .contact is binded with click().