How to select unchecked checkbox - javascript

I am using jquery UI tabs. I have 2 tabs with id #tab1 & #tab2 respectively. Both tab
contains 2 checkbox (total 4). And currently all are unchecked. Now i wrote this jquery code :
$("#tab2").find("input:not(:checked)").each(function () { alert("1"); });
My problem is that, the alert come 4 times, but it should come 2 times. Whats the problem here?
EDIT
<div class="dialog">
<div id="tab">
<ul>
<li>A</li>
<li>B</li>
</ul>
<div id="tab1">
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="tab2">
<input type="checkbox" />
<input type="checkbox" />
</div>
</div>
</div>

check this fiddle . it is working fine for me..
http://jsfiddle.net/kabichill/6XmYn/

Related

Rails | 2 checkbox in dom not clickable

I have a form in my page and there I have checkboxes.
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">
<label for="tour">Tour</label>
</div>
I use this checkbox in both on the page and the bootstrap modal in small devices.
<div class='col-sm-5 col-md-4 col-lg-3 hidden-xs'>
<%= render 'search_filters' %>
</div>
..
<div class="modal-content modal-main-index">
<%= render 'search_filters' %>
</div>
..
Ofcourse because of this, I have 2 checkboxes with the same id. So one of them can not be clicked. What is the best way to solve this. (I do not want to fill modal on button click with js return)
Ofcourse because of this, I have 2 checkboxes with the same id. So one
of them can not be clicked. What is the best way to solve this.
Use class instead of id
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" class="tour" value="Tour">
<label for="tour">Tour</label>
</div>
On the html label tag
Tip: A label can be bound to an element either by using the "for" attribute, or by placing the element inside the element.
Thus, if you have an html page like this
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
</body>
</html>
both of those check boxes are selectable by clicking on the text. Whereas
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
</body>
</html>
will only ever toggle one of them (the top one in my case).

CSS not selector not working [duplicate]

This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 6 years ago.
I'm trying to select all inputs except the inputs inside some div.class. I do not know why it does not work correctly. My structure looks something like below. And why selector :not not work. And what can I do to exclude all inputs from the "exclude" div. Because i want only select inputs: i1,i2.
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
$('input').not('.exclude *')
or
$('input:not(.exclude *)')
These will grab all inputs which are not descendants of elements with the exclude class. You can get more specific on which inputs (maybe only the ones under a certain div or class) but this should get you the exclusion you're looking for.
You can see a working example here
In your HTML structure:
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
each <input> is inside at least one <div> that does not have the class "exclude". Therefore your selector is working but it's not getting the result you want.
Instead, qualify the inputs selected the simple way:
console.log($("div input:not(.exclude *)").length);)
That selector will first select all of the <input> elements (well the ones inside <div> elements), but then exclude all of <input> elements that have an element with class "exclude" somewhere above them in the DOM.
If the original qualifier of being inside some <div> isn't really important, then all you need is "input:not(.exclude *)".
I marked inside your HTML the div that is not with the exclude class, and this is why you got 4 inputs on your console.log($("div:not(.exclude) input").length);
You can filter out the inputs that have parents with the exclude class:
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
console.log($("input").filter(function() { return $(this).parents('.exclude').length > 0}).length);
$("input").filter(function() { return $(this).parents('.exclude').length > 0}).css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div> <!-- This div is not with the class explude -->
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Take this:
console.log($("div.table.exclude input").length);
console.log($("div.table:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1" class="table">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="table exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Problem: there are inner divs which does not have the class and they satisfy the selector too.
Solution: Add another class to the divs which you want to be part of your selector and then use this new class too .. Like
<div id="tab1" class="tabs"> And
<div id="tab2" class="tabs exclude">
And then change script to
$("div.tabs:not(.exclude) input")

Not being able to pre-select desired radio box by default

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>
It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)
The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?

How to remain in the tab selected after reloading the page

I am working on a webpage. In one page we have 3 tabs A B and C. each tab contains some table with dynamic content and a Refresh button to reload the page(here we use window.location.reload() as we get the data as a single dump from data model).
The issue i'm facing is that even if i reload the tab C my page is going back to tab A. I need a method to store the status of which tab is active before reload.
The tab is called within an iframe with id 'mainFrame'
HTML:
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab A</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab B</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab C</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
</ul>
SCRIPT:
$(function(){
$(window ).unload(function() {
sessionStorage.setItem("tab1", $('#tab1').checked);
sessionStorage.setItem("tab2", $('#tab3').checked);
sessionStorage.setItem("tab3", $('#tab3').checked);
});
$(window).load(function() {
if (tab1){
document.getElementById("tab1").checked="true";
} else if (tab2){
document.getElementById("tab2").checked="true";
} else if (tab3){
document.getElementById("tab3").checked="true";
}
});
});
Thanks in advance
Store the active tab status in session, localStorage or as http request parameter and based on that hide/show the tab content on page load.
For example, if it is localStorage, then,use:
Before reload page:
localStorage.setItem("ActiveTabID" , "tab2");
Then on load:
$(window).load(function() {
var activeTab = localStorage.getItem("ActiveTabID");
if(activeTab=="tab1"){
$('#tab1Content').show();
$('#tab2Content').hide();
$('#tab3Content').hide();
}else if(activeTab=="tab2"){
$('#tab2Content').show();
$('#tab1Content').hide();
$('#tab3Content').hide();
}
likewise tab3, also show if it is active.

How can I select the next div using jQuery?

I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!
What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:
$('.slider').slider({
stop: function(event, ui) {
$(this).nextAll('.secondq:first').slideDown('slow')
}
});
Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:
<div class="option">
<h2 align="left">How high is your ceiling from the floor?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderFt slider"></div>
</div>
</div>
<!-- End Option -->
<div class="option">
<h2 align="left">How many windows do you have?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderWinDoor slider"></div>
</div>
<div class="secondq" style="display:none;">
<h2>What type of material are your windows made of?</h2>
<div class="radiocont">
<label>Wood</label>
<input type="radio" class="styled" value="wood" name="windowtype" />
</div>
<div class="radiocont">
<label>Metal</label>
<input type="radio" class="styled" value="metal" name="windowtype" />
</div>
<div class="radiocont">
<label>PVC</label>
<input type="radio" class="styled" value="pvc" name="windowtype" />
</div>
</div>
</div>
nextAll only gets siblings. Based on your HTML structure, you could do:
$(this).parent().next()
To make it more independent from the structure, you could also do:
$(this).closest('.slidewrap').nextAll('.secondq:first')

Categories