I'm trying to add / remove a class on click here, but toggleClass is not working as I'm expecting it to. On the contrary, addClass works fine, but I need it to remove the class on the second click.
$('.label1').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).toggleClass('checked');
$checkItem.prop("checked", !$checkItem.prop("checked"));
})
$('.label2').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).addClass('checked');
$checkItem.prop("checked", !$checkItem.prop("checked"));
})
Can you tell me what am I doing wrong?
See it in action here: Test jquery.
Thanks!
You can avoid the problem and simplify your logic by instead hooking to the change event of the checkbox. This then lets you set the checked class on the parent label based on the state of the checked property.
Using change over click on the checkbox is also much better for meeting accessibility standards as it allows users who navigate using the keyboard to trigger the same effects in the UI. Try this:
$(':checkbox').on('change', function() {
$(this).closest('label').toggleClass('checked', this.checked)
});
.checked {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="checkbox">
<label class="label1">
<input type="checkbox">
Check me out
</label>
</div>
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>
</form>
Here you can do it like this.
Try this example hope it will helps you.
$('.label1').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).toggleClass('checked');
if($(this).hasClass('checked')) {
$checkItem.prop("checked", true);
} else {
$checkItem.prop("checked", false);
}
})
$('.label2').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
if($(this).hasClass('checked')) {
$checkItem.prop("checked", false);
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
$checkItem.prop("checked", true);
}
})
.checked {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="checkbox">
<label class="label1">
<input type="checkbox">
Check me out
</label>
</div>
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>
</form>
The checkbox is inside you label so when it gets clicked it is clicking the checkbox too.
$('.label1, .label2').on('change', function() {
$(this).toggleClass('checked');
})
https://codepen.io/ankurace/pen/OgoQLG
This is a compact solution
$('input[type=checkbox].BorderRed').change(function() {
$($(this).parent()).toggleClass('checked');
});
NEW checkbox Object,
if you wont the effect
<div class="checkbox">
<label class="label2">
<input class="BorderRed" type="checkbox">
Check me out
</label>
</div>
if you dont wont the effect
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>
Related
I have this checkbox code
<div class="checkbox-group">
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm" checked disabled>
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Disabled checkbox</span>
</label>
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm">
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Normal checkbox</span>
</label>
</div>
And i want to add class disabled to checkbox-lable-sm class if the checkbox is disabled using jquery
css
.checkbox-group .disabled {
cursor: not-allowed;
}
I have tried this code but it is not working
$('.checkbox-group > input:disabled.formjs-checkbox-sm').each(function(){
$(this).find('.checkbox-lable-sm').addBack().addClass("disabled");
});
$('.checkbox-group input:disabled.formjs-checkbox-sm').each(function() {
$(this).parent().find('.checkbox-lable-sm').addClass("disabled");
});
Give it a try to this,
$(".checkbox-group input[type='checkbox']").each(function() {
if ($(this).is(':disabled')) {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
}
});
I am sure this will work.
Here is working jsfiddle
Here is second way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
});
Here is third way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest("label").find(".checkbox-lable-sm").addClass("disabled");
});
I have this code:
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
And I would like to show/hide the "answer" fieldset (default is hidden) after a click on the checkbox in fieldset "question" How to do that. I wasn't able to do that using the technique for a classic elemetn like:
<script>
$().ready(function(){
$('.question').live('click',function() {
$('.answer').show(300);
}
,
function(){
$('.answer').hide(200);
}
);
});
</script>
Could somebody help me how to do that using checkbox? Also if possible to null (uncheck) the checkbox when it's hidden.
Try this
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show(300);
} else {
$(".answer").hide(200);
}
});
FIDDLE
Attach onchange event to the checkbox:
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>
<script type="text/javascript">
function valueChanged()
{
if($('.coupon_question').is(":checked"))
$(".answer").show();
else
$(".answer").hide();
}
</script>
Simplest - and I changed the checkbox class to ID as well:
$(function() {
$("#coupon_question").on("click",function() {
$(".answer").toggle(this.checked);
});
});
.answer { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field" />
</fieldset>
Try
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
$(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']()
});
});
Demo: Fiddle
Or
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
var answer = $(this).closest('.question').next('.answer');
if(this.checked){
answer.show(300);
} else {
answer.hide(300);
}
});
});
Try this
<script>
$().ready(function(){
$('.coupon_question').live('click',function()
{
if ($('.coupon_question').is(':checked')) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
});
</script>
$(document).ready(function() {
$(document).on("click", ".question", function(e) {
var checked = $(this).find("input:checkbox").is(":checked");
if (checked) {
$('.answer').show(300);
} else {
$('.answer').hide(300);
}
});
});
<label onclick="chkBulk();">
<div class="icheckbox_flat-green" style="position: relative;">
<asp:CheckBox ID="chkBulkAssign" runat="server" class="flat"
Style="position:
absolute; opacity: 0;" />
</div>
Bulk Assign
</label>
function chkBulk() {
if ($('[id$=chkBulkAssign]')[0].checked) {
$('div .icheckbox_flat-green').addClass('checked');
$("[id$=btneNoteBulkExcelUpload]").show();
}
else {
$('div .icheckbox_flat-green').removeClass('checked');
$("[id$=btneNoteBulkExcelUpload]").hide();
}
I have a span class "checkbox" and an attribute "value" associated with a hidden input field, both of which are contained within nested divs.
By default the checkbox is unchecked but I would like to change the span class to "checkbox active" and the input value to "1" so that it is checked and rendered to reflect that change.
This code is generated by a Wordpress plugin and there are no ids.
What's the best method to set these two attributes?
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="hidden" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
As per your requirement.Why dont you set like this ??
$(document).ready(myfunc);
function myfunc()
{
$('.checkbox').addClass('checked');
$('.true_false').val('1');
}
if($('.checkbox').hasClass('checked'))
{
alert($('.true_false').val());
}
Click on the demo below to see that value 1 is getting set and checked class is getting set.
You can do this on click of a button or checking a checkbox.
Click Here
Try this:
Also for demo purpose, I have kept input as text instead of hidden.
Fiddle
(function(){
$(".checkbox").on("click",function(){
$(this).toggleClass("checked");
var val = 0;
val = $(this).hasClass("checked")?1:0;
$(this).parent().find(".true_false").val(val);
});
})()
.checked{
background: blue!important;
}
.checkbox{
width:20px;
background:#eee;
padding:5px;
border:1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="checkbox" id="checkbox" />
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
$(document).ready(function(){
$('#checkbox').change(function(){
var checkboxValue = $(this).is(':checked');
if(checkboxValue == true){
$(".true_false").val('1');
alert('1');
}else{
$(".true_false").val('0');
alert('0');
}
});
});
I have dom constructed like this . there are added dynamically depending on the count from the database.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
<div>
<input/>
<label>
<span></span>
</label>
</div>
This is my DOM structure
When I click on the inner span element click event not working. When I keep the span out side of the div as an independent element it works fine. Any suggestions why click is not raising in the inner span element
This is my click event
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});
The 'span' element doesn't have a .todo-remove class, in this case the event wont be called. Try to add the class to span and add some style like this:
padding: 20px;
display: block;
float: right;
Of course, you'll change this code later.
Just try this javascript. It will work for you.
$("label[for='check1']").click(function(){
alert("deleted");
});
The following code woks for me:
http://jsfiddle.net/Lknca8f1/
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
</div>
.todo-remove{
padding:20px;
background: #f00;
cursor:pointer;
}
$(function(){
$(document).on('click','.todo-remove', function(){
$(this).closest('.todo-task').remove();
});
})
Working code link Codepen
My be you are registered event before DOM ready.
Please register after ready event.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> Click
<span class="todo-remove mdi-action-delete">Span</span>
</label>
</div>
$(document).ready(function(){
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});
});
A workaround is to set the z-buffer of the inner span to -1
i.e.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete" style="z-index:-1"></span>
</label>
</div>
there was a ton of different ways I seen to do this here on stackoverflow. However, I have tried them and can't get it to work.
Here is my current code.
http://jsfiddle.net/tech0925/C9Z8N/5/
Here is the javascript
function printcardCheck() {
if (document.getElementById('print_card').checked) {
document.getElementById('printvoucher-receiver').style.display = 'block';
document.getElementById('printvoucher-receiver').style.padding = '10px 0 0 0';
document.getElementById('print_cards').value = 'Add this value';
}
else document.getElementById('printvoucher-receiver').style.display = 'none';
}
See the fiddle link above.
http://jsfiddle.net/DerekL/Y4YNs/
I believe you want to do something like this. I will change it to native JS later.
<form>
<label>
<input type="radio" name="set1" value="A">A</label>
<label>
<input type="radio" name="set1" value="B">B</label>
<label>
<input type="radio" name="set1" value="C">C</label>
</form>
<div class="more" id="A">Some more options for A</div>
<div class="more" id="B">Some more options for B</div>
<div class="more" id="C">Some more options for C</div>
$("form input").change(function () {
$(".more").removeClass("show")
.filter("#" + $(this).val()).addClass("show");
});
there should only be one tag that id is 'print_card',and you have two,so when getElementById('print_card') will return the first one, that is the radio