Develop Reference

JQuery: Checkbox won't stay Checked when toggling between buttons

I admit, still a noobie at jquery and I have a page with a total of 12 buttons / toggles (only 3 is shown as example) , which when clicked each one will pull up a php page with it set of checkboxes listed with products within a div on the advance search page. Since there are alot of information between each checkbox list, it slows the system down so I had to create an event when clicked it pulls that checkbox information when needed from another php page. Problem is... the checkboxes won't stay check when I toggle between the buttons. I have tried to a fuction where it sets the localstorage item when checked but doesn't seem to work. In so, need you help on how to make the checkboxes stay checked when going back to through each button / toggle.
So is there a way that will keep my checkboxes checked when toggleing? And How (please use code examples)
Is there a better way I could do to make this work more efficiently, so it will load the page faster? If so, How? (please use code examples)
KITE_PAGE.PHP (works the same for ball, hula hoop and other products)
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Like Kite 101 " /><label >Like USA Kite</label>
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Like Kite 102 " /><label >Like Mexico Kite</label>
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Like Kite 103 " /><label >Like Canada Kite</label>
</div>
NOTLIKE_KITE_PAGE.PHP (works the same for ball, hula hoop and other products)
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Not Like Kite 102 " /><label >Not Like Mexico Kite</label>
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Not Like Kite 103 " /><label >Not Like Canada Kite</label>
</div>
Advance Search Page:
Html from Advance Search page
Buttons (again only three is shown):
<ul class="category">
<li>KITES</li>
<li>BALLS</li>
<li>HULA HOOPS</li>
</ul>
The Div where the pages will load into:
<div id="product_container" >
<div class="kite box" >
<div class="tx-row" id='kite-in' >
</div>
<div class="tx-row" id='kite-x' >
</div>
</div>
<div class="ball box" >
<div class="tx-row" id='ball-in' >
</div>
<div class="tx-row" id='ball-x' >
</div>
</div>
<div class="document box" >
<div class="tx-row" id='hoop-in' >
</div>
<div class="tx-row" id='hoop-x' >
</div>
</div>
</div>
JQuery that retrieves the information when button is clicked
$(document).ready(function(){
var $content = $('.box');
function showContent(type) {
$content.hide().filter('.' + type).show();
}
$('.category').on('click', '.kite-btn', function(e) {
if ($('#kite-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#kite-in").load("/wp-content/themes/child/kite_page.php");
$("#kite-x").load("/wp-content/themes/child/notlike_kite_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$('.category').on('click', '.ball-btn', function(e) {
if ($('#ball-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#ball-in").load("/wp-content/themes/child/ball_page.php");
$("#ball-x").load("/wp-content/themes/child/notlike_ball_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$('.category').on('click', '.hoop-btn', function(e) {
if ($('#hoop-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#hoop-in").load("/wp-content/themes/child/hoop_page.php");
$("#hoop-x").load("/wp-content/themes/child/notlike_hoop_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$(".box").hide();
});
An Additional Question to this as well:
Is there a way to disable a checkbox with same class (example: class="product_chkKite101" ) when one is checked between pages?

first what you can do is use on click attribute for all checkbox and pass the current element and better use id also because it will be unique and only one for a one checkbox
<input id="product_chkKite101" type="checkbox" onclick="checkChecked(this)" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>
now in checkChecked function first make an empty array
var checkedCheckbox = [];
function checkChecked(ele){
var id = ele.id;
if ($.inArray(id, checkedCheckbox) !== -1)
{
var index = checkedCheckbox.indexOf(id);
if (index > -1) {
checkedCheckbox.splice(index, 1);
}
}else{
checkedCheckbox.push(id);
}
localStorage.setItem("selected", JSON.stringify(selected));
}
now to make checkbox checked when page is reload or when button is toogled you can run this code
var checkCheckedStorage = [];
$(function() {
if (localStorage.getItem("selected") != null) {
checkCheckedStorage = JSON.parse(localStorage.getItem("selected"));
checkChecked = checkCheckedStorage;
checkCheckedStorage.forEach(function(ele) {
console.log(ele);
$('#' + ele).prop('checked', true);
});
}
});
if this code doesnot get executed when toggling the buttons then what you can do is write the code inside a function again and call it from the toggle event of a button

I figured out why it wasn't staying checked. Every time I click on a button / toggle again, it reloads the information. I had my if statement with in my jquery in correct.
Updated jQuery
Had to add an id inside a div to each page. Then checked to see if the id is there or not. If it is not there, then upload the page. If it is there, just use the current page contents.
$('.category').on('click', '.kite-btn', function(e) {
if ($('#kitechk').length){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#kite-in").load("/wp-content/themes/child/kite_page.php");
$("#kite-x").load("/wp-content/themes/child/notelike_kite_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
alert('finish')
}
});

Checkbox Hidden Div Unchecked

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example

Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});

There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

clickable buttons instead of radio buttons

I want click able buttons instead of radio buttons. I saw an example on jsfiddle but only problem is I don't have labels tags in my code. I don't have access to code, so I cant add them either. I can only add javascript and css to my CMS. Is there any way to achieve results?
<div class="button1">
<input type="radio" checked="" value="1" name="question">question 1
</div>
<div class="button2">
<input type="radio" value="2" name="question">question 2
</div>
I got solution here but its not working in IE.
$(function() {
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
});

To get this functionality, you have to wrap your inputs (and the description) in a label. Assuming that your radio is always in a seperate container, this is possible with this piece of code:
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
working jsfiddle: http://jsfiddle.net/VyvpP/

If, what I think you're asking is that you have a radio button in the guise of a clickable button, this should do you:
-webkit-appearance:none
http://jsfiddle.net/54ek6/
You can hide the radio button with -webkit-appearance:none; and using :before psuedo classes, add in the labels.
This does not work on IE. (Just so you know!)

if you want something like this:
just copy and paste:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#rad").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input type="radio" checked="" value="1" name="question" id="rad">
</body>
</html>

Radio button opens textbox when checked, but won't close it when unchecked

I'm trying to create a dynamic form whereby users can select to either upload and image or embed a youtube clip.
I have tried this using radio inputs:
<script type="text/javascript">
$(".youtube").change(function () {
//check if radio button is checked.
if (this.checked && this.value === "youtube") {
//show a text box 'embedbode' when radio 'youtube' is checked
$("#embedcode").show();
} else if (!this.checked && this.value === "image"){
//hide the text box when 'image' is checked
$("#embedcode").hide();
}
});
</script>
And this is the html:
<input type="radio" value="image" id="type" name="type" checked='checked' autocomplete="off" />
<label>Image</label>
<input type="radio" value="youtube" id="type" name="type" class="youtube" />
<label>Video</label>
<input id="embedcode" placeholder="embed code" name="embedcode" type="text"/>
The radio button image is selected by default. When a I click on the video radio button a textbox opens whereby I can input an embed code for the video.
However, when I click back to image, should I change my mind on what I want to upload, the embed textbox is still there.
I've looked at the JS and can't see where I'm going wrong.
I tried adjusting the terms and adding an extra else if but the textbox won't hide when I click back to image.
Where am I going wrong?

<script type="text/javascript">
$(document).ready(function(){
$("#embedcode").hide();
$("input[name='type']").change(function () {
if($(this).val() == "youtube")
$("#embedcode").show();
else
$("#embedcode").hide();
});
});
</script>

When they check the other one, and you do (fixed your code here, to be jQuery):
if (!$(this).prop('checked') && $(this).val() === "image")
It is now checked... so it won't hide it. All you need to do is check for the value, since they clicked it and it's a radio, it will always be checked.
if ($(this).val() === "image")
An easier way to do this would just be:
$(".youtube").change(function () {
$("#embedcode").toggle($(this).val() == "youtube");
});

<script type="text/javascript">
$(document).ready(function(){
$("#embedcode").hide();
$("input:radio").change(function () {
if($(this).val() == "youtube")
{
$("#embedcode").show();
}
else
{
$("#embedcode").hide();
}
});
});
</script>

i want select one checkbox from 3 checkbox and display div if none is seletced hide div in simple javascript

i am able to select any one checkbox but i am displaying div more time as i select checkbox
here is the check box:
<INPUT type=CHECKBOX id='IP_3820' IP='12.12.12.12' PORT='5060' onclick='javascript: ipSelected(this)' value='3820' >12.12.12.12
<br />
<INPUT type=CHECKBOX id='IP_3822' IP='12.12.12.13' PORT='5060' onclick='javascript: ipSelected(this)' value='3822' >12.12.12.13
This div i want to display as check any one checkbox:
<div id='vp_3822' style='float:right;display:none;'>
<input type='radio' name='3822' id='IP_none' value='none' /> NONE /
<input type='radio' name='3822' id='g729' value='g729' />g729/
<input type='radio' name='3822' id='ulaw' value='ulaw' checked='checked' />ulaw
</div><br />
This is the function:
function ipSelected(el){
if(el.checked){
document.getElementById("IP_none").checked=false;
if(last_ip_id!="" && last_ip_id!=el.id && ( document.getElementById('system').value=='voipswitch' || document.getElementById('system').value=='asterisk' || document.getElementById('system').value=='ipsmarx')){
try { document.getElementById(last_ip_id).checked=false;}catch(e){}
}
last_ip_id = el.id;
document.getElementById("vp_" + el.value).style.display="block";
// Set destination value
if((document.getElementById('system').value=='voipswitch') || (document.getElementById('system').value=='asterisk' || document.getElementById('system').value=='ipsmarx')){
document.getElementById('dest_span').innerHTML = "#" + el.getAttribute("IP") + ":" + el.getAttribute("PORT");
document.theForm.idiplist.value = el.value;
}
}
}

It is because you keep displaying the divs on each checkbox's check but have forgotten to hide the rest of the divs
add a class all the divs say divClass
then use the below code to display the correct div and keep the others hidden
$(".divClass").hide();
$("#vp_"+el.value).show();

Hide Div in javascript
document.getElementById('"#vp_"+el.value').style.display = 'none';
Show Div in javascript
document.getElementById('"#vp_"+el.value').style.display = 'block';