Change checkbox value on click - javascript

I have checkbox nested in html elements. I want to target it and manipulates its value when somebody check it. I am trying this
jQuery(document).ready(function() {
jQuery('#my-form .checkbox-value input').click(function() {
jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
When someone click on label or checkbox it should changes values to yes if it is checked and no when it is not checked.

You could use this to target .on('change', '#my-form .checkbox-value input', function(){})
$(document).ready(function() {
$(document).on('change', '#my-form .checkbox-value input', function() {
console.log($(this).val())
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
And use if($(this).is(':checked')) to check if the box is checked

This should do it.
It's working with click event handler also.
$(document).ready(function() {
$('#my-form .checkbox-value input').click(function() {
if ($(this).prop("checked")) {
console.log('yes');
$(this).val('yes');
} else {
console.log('no');
$(this).val('no');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="no" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>

If what you are trying to do is to pull the first assignment from the input value, it would be more logical to give a special id and process the elements with that id.
I hope the code below will enlighten you.
jQuery(document).ready(function() {
var my_inputs = jQuery('#my-form .checkbox-value input');
jQuery('#my-form .checkbox-value input').click(function() {
//jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
//jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
$("#status").html(my_inputs.prop('checked') ? "true" : "false")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value" >
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
<p>
<span>input checked status : <code id="status"></code></span>
</p>

Related

jQuery - Assign the click function to the radio input

What I would like to do is assign both the checked value and the click function to the radio input located inside the parent div.
I currently have this code but it only works for assigning the checked value. The click () function does not work:
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<script>
jQuery('.contPosition').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
</script>
I dont know what you want to achieve exactly but only one click event could replace all the other event as below snippet :
$(function() {
//should be ".contPosition input[type=radio]"
$('.contPosition input[type=radio]').click(function(e) {
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
})
.contPrintPosition input::after {
content: attr(value);
width:100%;
margin-left:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>

Finding data attribute and checkbox children

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(...}
?

Form that changes class attribute to active

I have a web page associated with 3 <li> and each has its own onclick() function. By default, one of them is active. Now I have a form, if this form is submitted I want it to take me to one of the other two <li>.
In other words, I want it to remove the active class from the default one, and add it to one of the other two. How can I do that?
HTML:
<div class="container">
<ul class="editor-nav">
<li id="content-w" class="en-nav active">1. Add Status</li>
<li id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
JQuery:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script>
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"> </script>
<script type = "text/javascript" >
$("#setting-w").on("click", function() {
$("#firstdiv").fadeOut(1, function() {
$("#seconddiv").fadeIn(1, function() {});
$("#thirddiv").fadeOut(1, function() {});
});
});
$("#content-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeIn(0.1, function() {});
$("#thirddiv").fadeOut(0.1, function() {});
});
});
$("#cover-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeOut(0.1, function() {});
$("#thirddiv").fadeIn(0.1, function() {});
});
});
</script>
Use data attribute to fade your div.
$('.editor-nav li').click(function(e) {
$('.editor-nav li').removeClass('active');
var data = $(this).data('myval');
if (data == "2" || data == "3") {
$(this).addClass('active');
var tstDiv = data - 1;
$(this).attr('disabled', true);
$(document).find($('*[data-val="' + data + '"]')).fadeIn();
$(document).find($('*[data-val="' + tstDiv + '"]')).fadeOut();
}
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<ul class="editor-nav">
<li data-myval="1" id="content-w" class="en-nav active">1. Add Status</li>
<li data-myval="2" id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li data-myval="3" id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div data-val="1" class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div data-val="2" class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div data-val="3" class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
After page submit if your page is reloaded page loose state. So set your value when page submit like:
localStorage.setItem('key', 'your form Number')
Get localStorage when page load like:
var formID = localStorage.getItem('key');
After that check for null before add class:
if (localStorage.getItem("key") != null) {
(".editor-nav ul li").eq(formID ).addClass("active"); // Check this one on page load
}
You can use removeClass() and addClass() if you wish to add/remove any class based on their id.
Example:
$("#setting-w").on("click", function(){
$("#content-w").removeClass('active');
$("#cover-w").removeClass('active');
$("#setting-w").addClass('active');
}

Check/Uncheck of check-boxes upon certain events

this is my code :
script.js
$(document).ready(function() {
$('.checkbox_servers_list').click(function(){
var checkedValues = $('.group-list:checkbox:checked').map(function() {
return this.value;
}).get();
console.log(checkedValues);
var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
for (each in check_hosts){
$(".host-list:checkbox[value='"+check_hosts[each]+"']").attr("checked", true);
}
});
});
and the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="group-list-id" class="checkbox_servers_list"><div class="col-md-12">
<input type="checkbox" value="all" name="checkbox" class="group-list" id="group-checkbox_0">
<label for="group-checkbox_0">all</label>
</div> <div class="col-md-12">
<input type="checkbox" value="mumbai" name="checkbox" class="group-list" id="group-checkbox_1">
<label for="group-checkbox_1">mumbai</label>
</div> <div class="col-md-12">
<input type="checkbox" value="okhla" name="checkbox" class="group-list" id="group-checkbox_2">
<label for="group-checkbox_2">okhla</label>
</div> <div class="col-md-12">
<input type="checkbox" value="ungrouped" name="checkbox" class="group-list" id="group-checkbox_3">
<label for="group-checkbox_3">ungrouped</label>
</div> <div class="col-md-12">
<input type="checkbox" value="vagrant1" name="checkbox" class="group-list" id="group-checkbox_4">
<label for="group-checkbox_4">vagrant1</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="bangalore" name="checkbox" class="group-list" id="group-checkbox_5">
<label for="group-checkbox_5">bangalore</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="vagrant2" name="checkbox" class="group-list" id="group-checkbox_6">
<label for="group-checkbox_6">vagrant2</label>
</div>
</div>
<hr>
<div id="host-list" class="checkbox_hosts_list">
<div class="col-md-12">
<input type="checkbox" value="192.168.33.50" name="host-checkbox" class="host-list" id="host-checkbox_0">
<label for="host-checkbox_0">192.168.33.50</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.33.10" name="host-checkbox" class="host-list" id="host-checkbox_1">
<label for="host-checkbox_1">192.168.33.10</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.57" name="host-checkbox" class="host-list" id="host-checkbox_2">
<label for="host-checkbox_2">192.168.1.57</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.59" name="host-checkbox" class="host-list" id="host-checkbox_3">
<label for="host-checkbox_3">192.168.1.59</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.33.100" name="host-checkbox" class="host-list" id="host-checkbox_4">
<label for="host-checkbox_4">192.168.33.100</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.58" name="host-checkbox" class="host-list" id="host-checkbox_5">
<label for="host-checkbox_5">192.168.1.58</label>
</div>
</div>
</body>
</html>
What I am trying to achieve is when I click on any check box from the top section, respective check-boxes in the bottom section should get checked(which is happening) but when I un-check a check-box from the top section respective check-boxes in the bottom section should get unchecked(which is not happening).
I tried adding this in the beginnning of the js function.
$(".host-list:checkbox").attr("checked", false);
and
$(".host-list").prop("checked", false);
but it even stops the execution of the first feature.
P.S:
demo fiddle of what is working.
Since you have a list items to be checked, first marks all as unchecked
$(document).ready(function() {
$('.checkbox_servers_list').click(function(){
var checkedValues = $('.group-list:checkbox:checked').map(function() {
return this.value;
}).get();
console.log(checkedValues);
var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
$(".host-list:checkbox").prop("checked", false);
for (each in check_hosts){
$(".host-list:checkbox[value='"+check_hosts[each]+"']").prop("checked", true);
}
});
});
Try this to uncheck:
$('.host-list').find('input').prop('checked',false);
UPDATE: You should check your click function and then get values, so inside for I added a conditional.
for (each in check_hosts) {
if($(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked")){
$(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", false);
}else {
$(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", true);
}
}

Conditional Logic on my form, One option will take you to next

So the actual scenario is...
I have a form on a page that needs some conditional logic.
form fields...
Then, I have a bunch of questions for my customer which would determine what (form) would be displayed or not.
(i.e) What type of Marketing list are you looking for?
(options) Saturated or Targeted
If they choose Saturated, Then Saturated displays
If they choose Targeted, Then Targeted displays
either one or the other, both forms cannot be displayed at the same time.
and so on...
one prompt leads you to the next.
I would greatly appreciate any help I could get on this
This is the code I have so far:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var url = window.location.href;
var option = url.match(/option=(.*)/);
if (option !== null) {
$(".link ." . option[1]).trigger('click');
}
$(".link").bind('click', function () {
$('#intro-tekst').hide();
$('.boxes').hide();
$('.link').removeClass('selected');
$(this).removeClass('link');
$('#' + $(this).prop('class')).show();
$(this).addClass('link selected');
});
});
</script>
<body>
<p>
Who Do You Want to Mail to?
<ul>
<li>Business</li>
<li>Residents</li>
<li>Have a list?</li>
</ul>
</p>
<div class="boxes hidden" id="business">
What Type of Business List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul>
</div>
<div class="boxes hidden" id="saturation">
Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="targeted">
<div id="intro-tekst">Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul></div>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="residents">
<div id="intro-tekst">What Type of Consumer List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul></div>
</div>
</div>
<div class="boxes hidden" id="have-list">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
</body>
This gets you most of the way there: http://jsfiddle.net/rym2g/
The only thing it doesn't do at the moment is close all the other panes when you choose something further up the list. That I leave to you. :)
<form>
<ul class="form-nav">
<li>AAA</li>
<li>BBB</li>
</ul>
</form>
<form class="hidden" id="a-1">
<ul class="form-nav">
<li>aaa</li>
<li>bbb</li>
</ul>
</form>
<form class="hidden" id="a-1-1">
<p>A-1-1</p>
</form>
<form class="hidden" id="a-1-2">
<p>A-1-2</p>
</form>
<form class="hidden" id="a-2">
<ul class="form-nav">
<li>111</li>
<li>222</li>
</ul>
</form>
<form class="hidden" id="a-2-1">
<p>A-2-1</p>
</form>
<form class="hidden" id="a-2-2">
<p>A-2-2</p>
</form>
And JavaScript:
$(document).on("click", "ul.form-nav a", function(event) {
event.preventDefault();
var id = event.target.href.replace(/^[^#]+/, "");
console.log("Going to: " + id);
$(id).show().focus();
});

Categories