Change radio input selection on on click on selectx2 div:
<div class="row">
<div class="box">
<div class="inputoptions">
<span><input type="radio" name="abc" value="x1" checked="checked" class="y1" /> x1</span>
<span><input type="radio" name="abc" value="x2" class="y2" /> x2</span>
<span><input type="radio" name="abc" value="x3" class="y3" /> x3</span>
</div>
<div class="selectx2">select x2</div>
<div class="clear"></div>
</div>
Here is my JavaScript to change/select x2:
$('.selectx2').on('click', function(e) {
$(this).closest('.box').children('.inputoptions').children('.y2').prop('checked', true);
});
Where did I make the mistake?
As you are using .children() it find the immediate child of element and y2 is not immediate child of inputoptions.
You can use .find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Use
$(this)
.closest('.box')
.children('.inputoptions')
.find('.y2') //Use find here instead of children
.prop('checked', true);
OR
$(this)
.closest('.box')
.find('.inputoptions .y2')
.prop('checked', true);
$(document).ready(function() {
$('.selectx2').on('click', function(e) {
$(this).closest('.box').find('.inputoptions .y2').prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="box">
<div class="inputoptions">
<span><input type="radio" name="abc" value="x1" checked="checked" class="y1" /> x1</span>
<span><input type="radio" name="abc" value="x2" class="y2" /> x2</span>
<span><input type="radio" name="abc" value="x3" class="y3" /> x3</span>
</div>
<div class="selectx2">select x2</div>
<div class="clear"></div>
</div>
</div>
Related
I have a problem with checking only one checkbox... I tried two types of JS code.. But it doesn't work... To check by class, when u click on one element with class 'product-list' to deselect another... Have someone idea how to solve this?
HTML:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>">
<label for="file_1">SELECT</label>
</div>
</div>
JS Try 1:
<script type="text/javascript">
$('.product-list').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
);
</script>
JS Try 2:
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>
If you want to ensure that only one item to be selected at once, then actually that's what radio buttons were invented for (rather than checkboxes). And you don't need any JS code to make that work.
Demo:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_1" type="radio" name="PDF" value="File1">
<label for="file_1">SELECT 1</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_2" type="radio" name="PDF" value="File2">
<label for="file_2">SELECT 2</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_3" type="radio" name="PDF" value="File3">
<label for="file_3">SELECT 3</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_4" type="radio" name="PDF" value="File4">
<label for="file_4">SELECT 4</label>
</div>
</div>
change the #c01 and #c02 to the two check box ID's your doing this with.
I think this may do what you need it to do. If c01 checked, c02 is unchecked, and vice-versa
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});
I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?
HTML
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
Script:
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
checkboxval = $(this).val();
$(".simple-filter-items").find("." + checkboxval).toggle();
});
});
Fiddle is here https://jsfiddle.net/h5as3cwb/
You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked
Demo Code :
jQuery(document).ready(function($) {
$(".filter-click").change(function() {
//hide all div
$(".simple-filter-items div").hide()
//loop throgh checked checkboxes
$(".simple-filter input[type=checkbox]:checked").each(function() {
//show them
$(".simple-filter-items").find("." + $(this).val()).show();
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
This solution is very similar to #Swati's but uses the .filter() and .map() methods:
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
I hope you can see what I'm trying to do here.
I am trying to keep the same structure for the divs but clicking the select all in the top area only selects those 3 and the bottom select all only selects the bottom 3.
Obviously there are better ways to do this but I have stripped my code back to this basic example.
please help me rewrite this line:
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
So i can use the profile-id data attribute to select the checkboxes that fall inside that div.
Thanks
$('.profile #select_all_cb').click(function() {
var profileID = $(this).closest('.profile').data('profile-id');
if($(this).is(":checked")) {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
$(this).prop('checked', true);
});
} else {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() { //Check all boxes
$(this).prop('checked', false);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
IDs are unique, so changed id="select_all_cb" to class="select_all_cb".
On click .select_all_cb, goes up and finds .profile parent, store the checkbox value as boolean in isChecked variable, and finds all .score_alert_cb1 checkboxes within the current .profile element.
$(".profile .select_all_cb").click(function() {
var profile = $(this).closest(".profile");
// var profileID = profile.data('profile-id');
var isChecked = $(this).is(":checked");
profile.find(".score_alert_cb1").prop("checked", isChecked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
What's wrong with
$("div").find("[data-profile-id='"+profileID+"']").find("[type=checkbox]")each(...}
?
I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.
You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});
$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})
Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>
Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
Let's assume i have code like below;
<div>
<span>SELECT1</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
<span>SELECT2</span>
<div>
<input type="checkbox" value="option3" name="option3">
<span>option3</span>
</div>
<div>
<input type="checkbox" value="option4" name="option4">
<span>option4</span>
</div>
</div>
Is there a way to highlight related "SELECT1" or "SELECT2" if at least one of involved option has checked ? In my situation , it is ok to do so for labels options1,2 and option3,4 however, how for SELECT1 and SELECT2 using css or jquery/js ?
Thanks in advance,
You can do it quite easily:
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]').is(':checked')){
$('.title').css('color','red');
}
else{
$('.title').css('color','black');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="title">SELECT</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
</div>