JQuery Select All Chekboxes Using Label For - javascript

I am using a jquery plugin called magic-check, to create styled checkboxes. The checkboxes are displayed using the following example code:
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
I am having issues creating a select all button. I think the css on magic-check hides the checkbox and styles the label. I have tried numerous methods to solve, but no luck.

In pure javaScript you can write:
document.querySelectorAll('.magic-checkbox[type="checkbox"]').forEach(function(ele, idx) {
ele.setAttribute('checked', 'checked');
});
Instead, in jQuery you can write:
$(':checkbox.magic-checkbox').prop('checked', 'checked');
An example:
$('#selectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', 'checked');
});
$('#unSelectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/forsigner/magic-check/master/css/magic-check.min.css">
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
<label for="2">Checked</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
<label for="3">
Disabled
</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
<label for="4">Checked && Disabled</label>
</div>
<div>
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
</div>
<br>
<br>
<button type="button" id="selectall">Select all checkboxes</button>
<button type="button" id="unSelectall">Unselect all checkboxes</button>

The first solution will scan your page for labels and check the corresponding input with a matching id. The second and third solutions are just efficient ways of checking all your check boxes on the page.
$('#check-all').on('click', function(){
$('label').each( function() {
var target = $(this).attr('for');
$('input[id="' + target + '"]').prop('checked', true);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with Vanilla JS.
var inputs = document.getElementsByTagName('input');
var button = document.getElementById('check-all');
button.addEventListener('click', function(){
for ( var input in inputs ) {
inputs[input].checked = true;
}
})
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with jQuery.
$('#check-all').on('click', function(){
$('input').each( function() {
this.checked = true;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">1</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>

Related

nextAll() and prevAll() selects only one element, not all of them

I have a div with divs inside with inputs and their labels like this:
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
When i hover one of labels with mouse, i want to select all next divs and all previous divs (for appliing some css to them). So i use this:
$( "input[name='appointment_rating']+label" )
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show hover element");
console.log($(this).parent().html());
console.log("now will show all nextAll elements");
console.log(h.html());
console.log("now will show all prevAll elements");
console.log(j.html());
console.log("_");
alert("now will show all next elements");
h.each(function() {
alert(h.html());
});
alert("now will show all prev elements");
j.each(function() {
alert(j.html());
});
})
.mouseleave(function() {
console.log("leaved");
});
So if a select label for input with value "3", i want to see in alerts html of elements 0,1,2 as next and 4,5 as previous. But i see only 2 and 4, so only one element is selected as next and only one as previous. By the way, for some reason they are shoen several times, not one. What is wrong? And here is the jsfiddle - https://jsfiddle.net/c81wbefg/
jQuery.html will only return the innerHTML of the first element in the collection of matched elements. To output all the elements, you can loop over the jQuery collection with jQuery.each.
$("input[name='appointment_rating']+label")
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show all next elements");
h.each(function() {
console.log($(this).html())
});
console.log("now will show all prev elements");
j.each(function() {
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>

How to enable/disable next input field

I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

Cloning a section with JQuery not working

I try to clone a section after another section on user input (clicking a radio button), but it doesn’t works...
your help is appreciated.
<section class="clonetester">
<input id="1a" type="radio" value="1" name="q1">yes
<input id="1b" type="radio" value="0" name="q1" >no
<br />
<input id="date1" type="datetime-local" name="date" />date<br />
</section>
<section class="here">clone follows</section>
<script>
$('input').click(function(e){
$('#1a').(':checked'){
$('.clonetester').clone().appendTo(".here");
}
})
</script>
You have multiple changes that you will have to make for it to work.
Use change instead of click for input elements.
$('#1a').(':checked') has to be replaced with $('#1a').is(':checked') and should be enclosed in a if block.
$('body').on('change', 'input[type="radio"]', function() {
var $this = $(this);
if ($this.hasClass('1a') && $this.is(':checked')) {
// closeset clonetester
var $clonetester = $this.closest('.clonetester').first();
if ($clonetester) {
$clonetester.clone().appendTo(".here");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="clonetester">
<input class="1a" type="radio" value="1" name="q1">yes
<input class="1b" type="radio" value="0" name="q1">no
<br />
<input class="date1" type="datetime-local" name="date" />date
<br />
</section>
<section class="here">clone follows</section>

Inactivate Input Text by Selecting Radio Button

If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>
give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example
Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE
You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>
I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.

jQuery can only read select option once?

I think I may have found a bug I can't work around.
JSfiddle
I have an HTML dropdown with some html5 data. On change the jquery should find the selected option and pull the data from that option, then check some boxes.
I don't know how else to explain it except goto the jsfiddle and try it. The first option should check the first half of boxes and the second option should select all the checkboxes.
I hope someone here can tell me what I'm doing wrong. Be sure to change the select box 3-4 for interesting behavior.
Best,
Ryan
HTML
<h2>Features</h2>
<div class="form-group">
<div class="col-md-12 required">
<label for="feature_groups">Feature Group(Quick Select)</label>
<select name="feature_groups" class="form-control" id="feature_groups">
<option value="">Select One</option>
<option data-group='3,4,7,8'>2reg</option>
<option data-group='1,2,3,4,5,6,7,8'>fg1</option>
</select>
</div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
<label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
<label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
<label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
<label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
<label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
<label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
<label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
<label for="Feature5FeatureId">Premium Rims</label>
</div>
JS
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').attr('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
}
}
});
});
It is the same old attr() vs prop() issue....
Use .prop() to set the checked state instead of .attr()
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').prop('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
}
}
});
});
Demo: Fiddle

Categories

Resources