Jquery preventDefault for the parent link only - javascript

I have input radios element as a children of a hyperlinks as the following:
<li ><input type="radio" class="searchSrc" name="searchSrc" value="2" style="display: inline" /> الشروق</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="3" style="display: inline" /> الجزيرة</li>
<li ><input type="radio" class="searchSrc" name="searchSrc" value="4" style="display: inline" /> شبكة رصد</li>
I want to preventDefault only for the parent hyperlink of the input while keeping the accessibility of changing the radios values i.e clicking them.
I tried the following:
$(".searchSrc").parent().click(function(event){
event.preventDefault();
$(this).children('.searchSrc').attr('checked', this.checked);
//also I tried to place event.preventDefault(); in this line
})
However, I just able to click one time on a radio a button and I could not able to change the checked radio again.

<a> tag has no checked property . Your this is the <a> element.
To fix what you were trying to do should use prop() and can use it with function callback as follows:
$(".searchSrc").parent().click(function (event) {
event.preventDefault();
$(this).children('.searchSrc').prop('checked', function () {
return !this.checked
});
});
To work straight from the radios themselves would just do:
$(".searchSrc").click(function (event) {
event.stopPropagation();
});
I can't say that I understand why you would want radios inside an <a> tag...seems very strange to me.
DEMO

It's not really clear what you're trying to achieve in your setup, but if you don't want the anchor links around the inputs to be clickable, you should just remove them entirely and get rid of the javascript. They don't serve any purpose given what you're attempting to do. The radio buttons will be properly selectable at that point as well.

The click listener should be on the .searchSrc elements and you should use stopPropagation instead of preventDefault

Related

jquery how to uncheck a radio button in this code

I have two radio button.
and this is my jquery code to unselect the radio button when the other one becomes selected.
$("#RdbToday").click(function () {
$("#RdbDateRange").attr("checked", false);
});
$("#RdbDateRange").click(function () {
$("#RdbToday").attr("checked", false);
});
It is not working. which means that when I select the first one, the other one still on. also I can't unchecked the radio button once I checked it. why?
use .prop() instead:
$('radio_btn_selector').prop('checked', false);
Millind's answer right i am posting this alternative way you can use prop name
of html
Like this
<input type="radio" name="foo">
<input type="radio" name="foo" checked>
<input type="radio" name="foo">
See working demo
Demo
As your comment says you are using asp.net then its very simple to use groupname attribute Read here.....http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.groupname(v=vs.110).aspx

Trigger onclick function of input that has been checked automatically with jQuery

I have a form with some checkboxes which go like this:
<input type="checkbox" id="id6" value="3" onclick="optionselect('day','3','id6','50')" />
Conditioned on another input I can have these checkboxes checked automatically but for some reason I can't trigger the "optionselect".
I've tried some of the following, but nothing works:
$("#id6").prop("checked", true).trigger("click");
$("#id6").prop("checked", true).triggerHandler("click");
$("#id6").prop("checked", true).click();
FYI, "optionselect" just does a bit of math in some other text inputs.
I think that problem is that you should use onchange event in this case, not click. Try this:
<input type="checkbox" id="id6" value="3" onchange="optionselect('day','3','id6','50')" />
and
$('#id6').prop('checked', true).change();
Basically .click() effectively unchecks checkbox after you checked it with prop('checked', true).

How to trigger a click on checked radio button in jquery or javascript

Javascript:
if (GetCookie('prev_radio_value')!=null){
alert(GetCookie('prev_radio_value'));
$(":radio[value="+GetCookie('prev_radio_value')+"]").attr('checked',true);
$(":radio[value="+GetCookie('prev_radio_value')+"]").triggerHandler('click');
$(':radio:checked').triggerHandler('click');
$('input:radio[name=theme]:checked').click();
}else{
alert("clicking first");
$("input:radio:first").attr("checked", true).trigger("click");
}
HTML code:
<ul>
<li><input type="radio" name="theme" value="theme1"/>Theme1</li>
<li><input type="radio" name="theme" value="theme2"/>Theme2</li>
</ul>
this code is inside div -> 'checkbox_div'
click function :
$("#checkbox_div input:radio").click(function() {
alert("clicked") ;
});
I have used the trigger click in 3 ways but none of them worked or triggered the click event.
example link : http://jsbin.com/ezesaw/1/edit is not triggering the click event upon selection of first radio button.
Just call "click()" without the function as an argument
$("#checkbox_div input:radio").click();
It works just fine:
http://jsbin.com/ivojoz/1/edit
The problem may be that you are not selecting the radio correctly
try
$('#checkbox_div input[type="radio"]').click(function() {
alert("clicked") ;
});
$("#checkbox_div").on('click','input:radio', function() {
alert("clicked");
});
Give this code a shot. It worked for me.
In case u are still interested in this question:
The click event is implied when selecting/checking a radio button, all you need is to bind a procedure to it, this is just ONE way:
//js for radio button click
$('input[type="radio"]').on('click', function(){
window.alert($(this).val());
})
<!--html-->
<input type="radio" value="first" name="same"/>
<input type="radio" value="second" name="same"/>
<input type="radio" value="third" name="same"/>
Whether done manually or programmatically, it seems that clicking an already checked radio button does not necessarily have any effect!
Assuming HTML of:
<input type="radio" name="rv_submit" value="delete" id="rb2" checked>
Trigger the required action via jQuery as follows:
$('#rb2').prop('checked', false); // Turn off 'checked' ...
$('#rb2').click(); // ... or click() has no effect

stop label from toggling the input checkbox

I have the following html code. When clicking on the label it toggles the checkbox.
<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...
The best solution would be to let label toggle the checkbox as that is intuitive and expected behaviour.
Second best solution is to make sure your checkbox is not nested inside label and label does not have for attribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>
Last resort
You could prevent the default behaviour of the click event using jQuery:
$('label[for="startClientFromWebEnabled"]').click(function(e) {
e.preventDefault();
});​
Please see this jsFiddle for an example.
There is CSS solution too:
label {
pointer-events: none;
cursor: default;
}
if you are using JQuery, add an id on your label then
add this in your script:
$("#lbl").click(function(){
return false;
});
Just prevent default on label or any part of label, if desired.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>
or
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label for="1">foo some part <span class="prevent-default">not</span> clickable</label>
"I have some logic that takes the id from the element "
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.

jQuery/JavaScript - Hide / Show Drop down box pending on Radio Button

I want to make it so that the drop-down is only displayed when the radio button (option 3) is clicked and have it hidden if either 1 or 2 is selected. What would be the best way to complete this? I have a little bit of experience with JavaScript and slim to none with jQuery but it seemed like it might be the way to go.
Thanks for any help,
Dan
Here is the HTML code I have as of now:
<p class="help">Selection:</p>
<div id='buttons'>
<label><input type="radio" name="select" /> Option 1 </label>
<label><input type="radio" name="select" /> Option 2</label>
<label><input type="radio" name="select" /> Option 3</label>
</div>
<div id="list" style="display: none;">
<label>Please Select From the List:
<select>
<option>True</option>
<option>False</option>
</select>
</label>
</div>
$(document).ready(function(){
$("[name=select]").change(function(){ // Whenever the radio buttons change
$("#list").toggle($("[name=select]").index(this)===2); // Only keep the list open when it's the last option (First option = 0, Third option = 2)
});
});
This code in action.
Assuming you are using jquery, as it sounds like it from your question, you could modify your HTML like so:
<p class="help">Selection:</p>
<div id='buttons'>
<label><input type="radio" name="select" id="option1" /> Option 1 </label>
<label><input type="radio" name="select" id="option2" /> Option 2</label>
<label><input type="radio" name="select" id="option3" /> Option 3</label>
</div>
<div id="list">
<label>Please Select From the List:
<select id="mySelect">
<option>True</option>
<option>False</option>
</select>
</label>
</div>​
</p>
Then you could write some jquery like so:
$(document).ready(
function()
{
$("#option1, #option2, #option3").click(
function()
{
if (this.id == "option3")
$("#mySelect").hide();
else
$("#mySelect").show();
});
});​
You can see it working here: http://jsfiddle.net/AVFuY/3/
EDIT: I removed the unneeded class and just used the id's so as to not confuse and add unnecessary code.
Since this is a fairly basic question, I think it'll be instructional to walk you through the jQuery documentation while I answer your question. If you know truly nothing about jQuery, I recommend following this short tutorial first -- it will make things much, much easier for you in the future: jQuery Documentation - Getting Started With jQuery
Your requirement is that something happens (in this case, another element is hidden/shown) when we click the radio buttons. There's two parts to this problem: first, we need to find the radio buttons, then we need to make something happen when we click it.
1. Finding the radio buttons
Take a look at the jQuery Selector documentation here: http://api.jquery.com/category/selectors/
As you can see, there's a specific pseudo-selector for radio buttons, ":radio". We want to select everything inside of the element with ID "buttons", so this is how the selector will look in total:
$("#buttons input:radio");
By the way, it's called a "pseudo-selector" because it filters items we've already selected (in this case, input tags inside of a div with id "button"). Pseudo-selectors always start with a ":".
2. Making something happen when we click them
Consult the jQuery Events reference here: http://api.jquery.com/category/events/
We want the ".click()" event here, clearly. Once we've selected our elements, we can apply a click handler to them like this:
$("#buttons input:radio").click(function() {
// make something happen here
alert("input button clicked: " + $(this).index());
});
Note that this will apply the same click handler to all three of the input buttons, but you can access the specific element that was clicked via the "this" keyword. Wrapping $() around it makes it into a jQuery selection rather than just a Javascript object and allows us to call jQuery functions on it.
3. Hiding and showing the list element conditionally
Let's extend the code above to actually hide and show that other div, depending on which item was clicked. We're going to refer to the jQuery Effects documentation so that we can make hiding and showing it exciting: http://api.jquery.com/category/effects/
The functions we'll be using are ".slideUp()", which hides an element, and ".slideDown()", which shows it. We'll also be using the ".index()" function I used in the previous example to figure out which button was clicked, although I recommend giving the button a unique ID in the future so that your code isn't dependent on the order of the buttons. Here's the final code:
$("#buttons input:radio").click(function() {
// if it was the third button (0-indexed, so the 3rd one is index 2)...
if ($(this).index() == 2) {
// display the element with ID "list"
$("#list").slideDown();
}
else {
// hide the element with ID "list"
$("#list").slideUp();
}
});
Sorry for the length of this answer, but hopefully it was more conducive to your understanding of jQuery than "copy and paste this 3-line super-compact solution".
<label><input type="radio" name="select" onclick="document.getElementById('list').style.display=this.checked?'':'none'" /> Option 3</label>
Without changing your markup:
$(function()
{
$("#list").hide();
$("#buttons input:radio[name=select]").click(function()
{
var myindex = $("#buttons input:radio[name=select]").index(this);
if (myindex == 2)
{
$("#list").show();
}
else
{
$("#list").hide();
};
});
});
EDIT: Another option: just show it on the last button in the list.
$(function()
{
$("#list").hide();
$("#buttons input:radio[name=select]").click(function()
{
var myindex = $("#buttons input:radio[name=select]").index(this);
var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]");
if (myindex == lastone)
{
$("#list").show();
}
else
{
$("#list").hide();
};
});
});

Categories