Tag: checkbox
Nabin Nepal (Starx) checkbox javascript
August 6, 2013

I want to show an image when a checkbox is checked

User2656427’s Question:

user2656427user2656427

I have a question about checkboxes when paired with radio buttons. I have some maps and whenever I choose a radio button, a certain image appears and I can hover my mouse to choose a polygon I have mapped. The thing is, I want, along with the radio buttons, a checkbox with the label “Show all”. Whenever I check the box I want the image with all the polygons to appear. I hope I’m clear enough. Here is the code.

function showDiv (divId)
{
  var div = document.getElementById (divId);
  var divs = document.getElementsByTagName('div');
  for (var i in divs) 
  {
    divs [i].className = "hidden";
  }
  div.className = "shown";
}

$(document).ready(function() {
  $('.mapF').maphilight({
  });
});
function fnchecked(blnchecked)
{
  if(blnchecked) {
    document.getElementById("divcheck").style.display = "";
  } else {
    document.getElementById("divcheck").style.display = "none";
  }             
}

.hidden
{
  display:none;
}
.shown
{
  display:block;
}
#img {
  z-index:1000;
}
ul { list-style-type: none }

<ul>
  <li><input type="radio" onclick="showDiv ('1')" name="selectme">#sports</input></li>
  <li><input type="radio" onclick="showDiv ('2')" name="selectme">#nature</input>       </li>
  <li><input type="radio" onclick="showDiv ('3')" name="selectme">#culture</input> </li>
  <li><input type="radio" onclick="showDiv ('4')" name="selectme">#cuisine</input> </li>
  <li><input type="radio" onclick="showDiv ('5')" name="selectme">#nightlife</input> </li>
</ul>
<div id="1" class="visible" style="border:0px solid #ddd; width:800px; height:800px; overflow:visible;">
  <input type="checkbox" name="fldcheckbox" id="fldcheckbox"  onclick="fnchecked(this.checked);">Show all</input>
  <div id="divcheck" style="display:none; ">
    <img id="sports"  src="images/greece_sports.jpg" z-index:100/>
    </div>
    <img class="mapF" src = "images/greece_map.png" alt="" width="800" height="800"   border="0" usemap="#greece" />
    <!-- ------------------------ MAP ---------------------- -->
    <map class="mapH" name="greece">
      <area shape=poly coords=450,418,502,418,589,503,589,669,576,657,406,657,406,462,405,459,405,456,407,455,407,451,404,449,404,443,401,443,401,429,402,428,400,426,400,421,398,420,398,418, href="#" alt="" title="Cyclades" data-maphilight='{"stroke":false, "strokeColor":"1a6cb5", "strokeOpacity":1, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"0256a4", "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=306,241,434,264,502,333,502,418,398,418,399,416,400,414,403,413,405,412,405,408,396,399,391,398,389,396,385,396,381,394,377,393,372,393,368,388,368,385,366,384,366,382,364,381,364,378,362,375,361,378,358,378,355,376,350,376,348,375,346,376,343,376,343,374,345,373,342,369,340,369,340,366,344,364,344,362,341,360,336,360,333,358,333,360,329,360,326,362,321,356,321,351,319,349,312,349,309,346,308,346,307,348,304,348,302,345,299,345,298,346,296,345,294,343,291,339,285,340,282,340,279,339,278,336,279,333,282,330,284,329,287,330,289,332,292,333,295,334,302,332,304,328,309,329,313,325,317,323,317,320,313,321,313,317,315,316,315,313,313,310,310,310,309,308,309,304,307,305,305,305,301,299,301,290,305,289,310,289,311,286,311,284,321,282,317,283,320,287,327,287,333,294,333,297,336,301,336,305,332,306,332,308,327,310,326,310,326,306,324,306,322,310,323,311,327,311,334,309,334,307,337,307,340,305,343,305,345,302,344,298,342,295,339,291,339,288,337,286,334,282,331,278,326,272,325,268,322,266,318,265,317,263,312,260,308,253,307,248, href="#" target="_self" alt="Sporades" title="Sporades" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=692,456,785,586,715,782,589,669,589,502, href="#"     target="_self" alt="Dodekanisa" title="Dodecanese" data-maphilight='{"stroke":false,     "strokeColor":"", "strokeOpacity":0.5, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside",     "shadowRadius":4}' />
      <area shape=poly     coords=73,573,193,522,193,526,196,528,196,530,199,532,200,535,200,537,203,538,205,539,205,540,202,546,202,549,203,550,203,552,205,552,205,554,210,554,211,553,214,553,214,556,218,562,222,559,223,556,221,550,221,543,222,542,222,535,226,533,230,530,237,530,242,531,243,532,243,536,242,537,242,541,241,543,243,545,245,544,247,544,249,545,251,550,254,553,257,561,259,566,262,566,262,569,260,569,260,571,261,573,261,577,262,577,262,585,260,585,259,586,259,588,260,590,264,590,268,594,269,595,270,594,270,589,268,586,268,576,272,575,270,573,272,569,272,565,277,563,276,561,276,558,281,555,296,555,298,563,299,563,300,567,305,572,305,576,310,579,310,582,312,587,314,585,318,585,321,588,321,593,324,596,326,594,329,595,331,595,330,593,327,593,327,592,325,589,325,583,322,584,318,578,316,575,316,571,317,569,316,567,316,564,318,562,321,562,322,559,321,558,321,555,318,553,318,549,315,543,314,539,313,538,313,536,314,535,314,532,312,530,406,530,406,657,369,657,215,725, href="#" target="_self" alt="Myrtoo" title="Myrtoan Sea" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=617,135,692,456,589,502,502,418,502,333,434,264,306,242,305,236,302,234,299,231,295,228,294,224,293,223,294,221,293,219,290,217,286,215,283,210,282,209,282,203,280,199,280,197,282,194,284,191,285,185,287,180,290,176,286,172,286,168,284,165,284,163,285,162,290,162,290,158,293,156,296,159,297,158,297,153,304,152,306,151,306,145,308,144,312,144,315,146,316,147,316,150,315,152,318,155,318,156,317,158,312,161,305,161,305,162,308,164,308,167,311,170,311,172,315,172,316,174,319,175,321,177,321,179,327,181,331,184,338,186,344,189,345,194,346,197,345,198,346,200,344,203,344,205,347,208,350,212,350,216,349,217,350,219,352,218,354,217,359,217,365,221,370,223,376,223,374,220,373,217,369,217,362,214,359,212,355,208,354,205,352,202,350,200,348,199,347,197,346,194,346,190,347,188,351,184,355,184,362,188,366,189,372,189,375,193,378,195,380,199,383,202,383,204,384,205,384,208,386,209,386,211,389,212,392,215,394,216,394,218,396,220,398,218,400,215,402,213,402,212,399,211,400,208,399,206,399,202,395,200,391,197,385,195,382,194,381,191,376,186,375,184,375,180,378,178,379,176,382,177,384,177,388,175,391,175,396,176,398,177,403,182,408,183,414,183,416,187,420,191,420,193,425,197,426,201,433,199,432,196,430,194,424,189,422,184,420,182,419,181,416,181,416,178,409,176,406,175,403,172,402,167,401,167,401,170,402,173,401,174,395,174,392,173,388,168,386,166,385,163,386,160,387,158,393,158,391,156,387,155,385,153,382,151,382,149,379,144,375,143,375,140,378,135,379,132,382,132,386,130,388,129,391,130,398,134,403,137,405,137,406,136,408,136,412,134,421,128,425,126,425,123,427,123,426,121,428,117,430,117,432,113,440,111,445,111,447,112,448,115,452,121,454,120,458,120,458,122,461,122,462,121,463,121,465,122,470,118,474,114,478,113,481,112,482,109,484,108,488,105,492,105,493,106,496,106,496,107,493,110,496,112,503,112,503,113,507,111,512,112,513,115,517,116,524,119,526,120,529,120,530,119,533,119,538,121,560,121,564,124,565,126,567,128,567,134,573,132,574,131,575,130, href="#" target="_self" alt="NorthEast Aegean" title="North East Aegean" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeee", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=369,657,576,657,715,782,395,782,215,725, href="#" target="_self" alt="Crete" title="Crete" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"86acd1", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=161,393,165,391,171,387,172,385,176,382,176,377,173,375,173,372,174,371,175,371,178,376,179,377,179,381,180,383,183,384,184,385,184,386,187,386,189,388,189,392,191,393,194,391,197,389,201,387,204,388,209,388,210,390,212,390,212,387,217,384,219,384,221,386,223,386,226,382,232,384,237,384,240,387,243,387,247,391,252,388,256,390,257,389,262,389,263,390,265,388,263,386,263,384,266,383,265,381,266,379,268,379,268,381,271,381,276,388,276,389,278,390,278,395,279,397,280,397,281,390,283,389,286,386,289,386,291,388,291,390,290,391,290,393,300,398,300,399,298,401,299,403,306,403,313,405,318,405,321,409,322,409,324,406,326,406,329,410,335,410,335,413,333,414,335,416,335,418,327,423,317,423,314,421,312,420,305,424,306,425,309,425,313,429,314,430,315,431,312,435,310,435,309,436,304,436,298,432,296,429,292,425,287,422,282,419,277,417,275,415,273,414,266,414,259,410,251,409,248,406,246,406,242,401,242,400,237,400,233,397,233,394,230,394,227,392,221,392,220,391,218,393,216,393,214,394,211,398,209,402,208,404,205,407,203,409,199,411,198,412,194,410,190,409,186,406,184,405,183,406,180,404,179,405,178,407 href="#" target="_self" alt="Corinthian Gulf" title="Corinthian Gulf" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=10,199,95,240,92,244,91,244,89,243,89,247,86,248,83,257,87,259,92,259,91,264,90,265,92,267,92,269,88,268,89,272,92,273,92,279,94,282,97,284,100,285,108,285,108,292,110,294,113,295,114,299,117,303,121,306,123,307,127,311,127,321,129,321,129,319,134,320,132,318,128,317,128,314,132,311,132,306,134,305,136,305,137,307,137,310,140,310,140,308,141,308,145,310,146,313,148,313,150,316,153,316,154,313,156,312,159,312,164,320,162,322,162,326,164,327,165,333,163,334,162,333,162,331,159,328,158,329,156,334,155,332,151,328,152,326,148,326,148,324,146,324,142,326,144,325,140,326,138,325,137,326,131,326,129,326,133,329,133,332,128,333,128,336,127,338,130,339,130,342,136,338,139,338,140,340,142,351,145,352,149,352,149,356,151,359,151,370,154,367,157,367,157,370,156,373,160,380,160,385,158,385,157,388,160,388,160,392,161,394,179,408,179,412,178,414,174,422,171,426,168,429,164,433,161,434,158,433,156,437,156,441,159,442,164,444,168,446,171,449,173,445,173,459,172,461,178,461,182,464,185,468,189,470,193,473,197,479,200,484,203,491,204,495,205,499,204,503,202,505,198,510,195,512,193,515,193,522,73,573, href="#" target="_self" alt="" title="Ionian Islands" data-    maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":0.5, "strokeWidth":1,     "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false,     "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4",     "shadowPosition":"outside", "shadowRadius":4}' />
    </div>
  </map>
</div>

The problem I have now, is that when I check the box nothing appears. However the image appears when no radio button is selected, but the first image also shows. I would like only the image of the checkbox to be shown.

CodePen

StarxStarx

First of all do not use numeric ids like 1, 2 etc. User something like “container-1”, it can used in the script in the same way.

Also, you dont have to go through every elements to hide and show a particular div.

function showDiv (divId) {
   var div = document.getElementById ("container-"+divId);

   //Get previously shown div like this
   var preDiv = document.getElementsByClassName("shown")[0];
   preDiv.className = "hidden";

   // Now add shown to the current div           
   div.className = "shown";
 }

Also move your code into the $(document).ready(); function.

or, Since you are using jQuery already, use this instead

$(function() {
    function showDiv (divId) {
       $(".shown").attr('class', 'hidden');
       $("#container-"+divId).addClass('shown');
     }
});
Nabin Nepal (Starx) checkbox if-statement javascript
May 30, 2013

Javascript not checking whether a checkbox was selected or not

User2437473’s Question:

I’m trying to build a quiz with multiple choice questions, one of which has multiple correct answers. So I’m trying to check which checkboxes in my questions have been selected by a student in order to give the right feedback. my code is:

for(var i = 0; i< input1.length; i++)
    {
        if(input1[0].checked && input1[1].checked)
        {
        submit_answer.onclick = showFeedback1; 
        }
        else
        {
        submit_answer.onclick = false1; 
        }
    }

It never takes the first if, even if I select those two only. No matter what I put in the if statement, it only takes the else.

and this is just a part of my .js

var quiz = document.getElementById('quiz');

var questions = quiz.getElementsByTagName('p');

input1 = questions[0].getElementsByTagName('input');

var submit_answer = document.getElementById('submit_answers'); // this is the submit button
StarxStarx

I cannot make proper assumption of what you are trying to do.

FIRST PROBLEM

Your for loop is incrementing on 1, so on the each next iteration it is comparing using same previously used value.

SECOND PROBLEM

Your structure is horrible, your script fetches up all the input elements inside every p. You should properly organize your element in groups and then match whether or not they are checked.

Nabin Nepal (Starx) checkbox html javascript jquery
April 27, 2012

What Data Type is $('#checkbox').attr('checked')

Question by Jonathan Wood

Jonathan WoodJonathan Wood

I’ve done a lot of searching on the web and found examples that treat $('#checkbox').attr('checked') as a string and others that treat it as a Boolean.

In my case, I find that this statement works as expected:

$('#AcceptAgreement').attr('checked', false);

But this one does not:

if ($('#AcceptAgreement').attr('checked') == true)

The second statement is false because in fact the value is ‘checked’.

So which is it? Is it a string or Boolean value, and how can I read and write it in a reliable manner?

Answer by Kevin B

Kevin BKevin B

This depends on which version of jQuery you are using.

checked is both a property and an attribute. In older versions of jQuery, .attr() always returned the property, not the attribute, which was usually a boolean value. Newer versions of jquery (1.6+) have a new method called .prop which returns the boolean property value, while .attr() now properly returns the string value. I’m not sure if the attribute is always updated when the property changes.

Answer by Starx

StarxStarx

There is a fundamental way of finding out the data types

console.log(typeof $('#AcceptAgreement').attr('checked'));

But before jQuery 1.7, it used to return property value, now it returns pure string.

Another alternative to this is .prop('checked') which return boolean.

Nabin Nepal (Starx) checkbox forms javascript validation
April 5, 2012

how can i make a javascript based form checkbox validate with javascript before sending my form

Question by phj

phjphj

Hi i have a contact form on my site, In this form i got a javascript checkbox button.

This is the end code of my form: this div tag is my checkbox: 

<p><label for="agree">(*) I agree whit the transport terms and conditions:</label><div id="cb"></div></p>
<p>hi
<input name="Submit / Send" type="submit" class="submit" id="Submit / Send" tabindex="370" value="Submit / Send" />
<p id="error_zone" style="visibility:hidden;">Errors: There are some errors in the form. Please correct them.</p>
</p>

This is the javascript text button:

<script type="text/javascript">
    var cbh = document.getElementById('cb');
    var val = '1';
    var cap = '';

    var cb = document.createElement('input');
    cb.type = 'checkbox';
    cbh.appendChild(cb);
    cb.name = val;
    cb.value = cap;
    cbh.appendChild(document.createTextNode(cap));
</script>

also i make use of spry validation for my other form elements.
I would like to validate the checkbox with javascript to create a captcha checkbox!
Is it posible to let pop up a validation masage and and not disturbe the spry validation?!
Its important that if javascript is turned off the form als can’t submit any more.

Hope someone can help me. thanx alot for your time!

i’m trying to encomplish this: http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

snippet of spry validation:

<script type="text/javascript">
var errorsOnSubmit = function(form){
 var ret = Spry.Widget.Form.validate(form);
 var errorZone= document.getElementById('error_zone');
 if (!ret){
      errorZone.style.visibility = 'visible';
      errorZone.style.backgroundColor = 'red';
 }else{
      errorZone.style.visibility = 'hidden';
 }
 return ret;
}
</script>
<script type="text/javascript">
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {isRequired:false,  invalidValue:"1", validateOn:["blur", "change"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {isRequired:false, invalidValue:"1", validateOn:["blur", "change"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {isRequired:false, invalidValue:"1", validateOn:["blur", "change"]});

Answer by Starx

StarxStarx

Give an ID to the checkbox after you created the element

cb.type = 'checkbox';
cb.id = 'mycheckbox';
cbh.appendChild(cb);

Now, you can select the element using document.getElementById('mycheckbox') and the validate it.

Here is a snippet to validate the checkbox

var myform = document.forms("yourformname");
myform.onsubmit = function() {

    //validate the checkbox
    var checkb = document.getElementById('mycheckbox');
    if(checkb.checked != true) { 
       alert('not checked');
    }

    //rest of the validation
};

Update 1:

Haven’t tested but should work

var errorsOnSubmit = function(form){

  //validate the checkbox
  var checkb = document.getElementById('mycheckbox');
  if(checkb.checked != true) { 
     alert('not checked');
  }

 var ret = Spry.Widget.Form.validate(form);
 var errorZone= document.getElementById('error_zone');
 if (!ret){
      errorZone.style.visibility = 'visible';
      errorZone.style.backgroundColor = 'red';
 }else{
      errorZone.style.visibility = 'hidden';
 }
 return ret;
}
Nabin Nepal (Starx) checkbox css vertical-alignment
March 22, 2012

Vertically aligning a checkbox

Question by F21

F21F21

I have looked at the different questions regarding this issue, but couldn’t find anything that works due to limitations in my markup.

My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup).

<ul>        
    <li>
        <input type="checkbox" value="1" name="test[]" id="myid1">
        <label for="myid1">label1</label>
    </li>
    <li>
        <input type="checkbox" value="2" name="test[]" id="myid2">
        <label for="myid2">label1</label>
    </li>
</ul>

I need the checkbox to be on the right and centered vertically in the <li>

Currently, this is styled as:

li input{
   display: inline-block;
   float: right;
   margin-right: 10px;
}

I have tried using various values for vertical-align, but that doesn’t seem to help. Also, in some cases the label can be very long and span multiple lines. The checkbox would still need to be able to vertically center itself when the height of the li is arbitrary.

How can I go about achieving this?

Answer by Supr

SuprSupr

Vertical alignment only works on inline elements. If you float it, then I don’t think it is treated as part of that stream of inline elements any more.

Make the label an inline-block, and use vertical alignment on both the label and the input to align their middles. Then, assuming it is okay to have a specific width on the labels and checkboxes, use relative positioning instead of floating to swap them (jsFiddle demo):

input{
    width:20px;

    position:relative;
    left: 200px; 

    vertical-align:middle; 
}

label{  
    width:200px;       

    position:relative;
    left: -20px;

    display:inline-block;    
    vertical-align:middle; 
}

Answer by Starx

StarxStarx

Its not a perfect solution, but a good workaround.

You need to assign your elements to behave as table with display: table-cell

Solution: Demo

HTML: 

<ul>        
    <li>
        <div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
        <div><label for="myid1">label1</label></div>
    </li>
    <li>
        <div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
        <div><label for="myid2">label2</label></div>
    </li>
</ul>

CSS: 

li div { display: table-cell; vertical-align: middle; }
Nabin Nepal (Starx) checkbox html jquery
March 15, 2012

jQuery based checkbox not working

Question by Alex Mathew

Alex MathewAlex Mathew
$(document).ready(function() {
    var dataString="hy";
    var htmlnew="<input type='checkbox' name='formDoor' value='A' class='list' enable='true'>Check 1";

    alert(htmlnew);

    $(".list").change(function()
    {
        $("#regTitle").append(htmlnew);
    });
 });

The above is which i used when each time i check the checkbox with class list. i get a new one in #regTitle div, but the problem i am facing is the newly generated check boxes are not able to checked,can you guys tell me whats the problem?

Answer by Starx

StarxStarx

Your checkbox’s change event does not attach to the dynamically generated elements. You will have to delegate the bind. Using .on() is very good for this purpose.

$("body").on("change", ".list",function() {
    $("#regTitle").append(htmlnew);
});
Nabin Nepal (Starx) checkbox forms php php-form-processing
March 5, 2012

PHP Forms – Numeric Value of Checkbox

Question by Patrick Appelman

Patrick AppelmanPatrick Appelman

I am creating an online order form for multiple products. I need to calculate the total cost for the products selected via checkbox and send it as a confirmation e-mail. The value of the checkbox is the price in dollars.

<input type="checkbox" id="product1" name="product1" value="100" />
<input type="checkbox" id="product2" name="product2" value="250" />

In my ‘process.php’ file, I need to total the cost for all items if they are checked.

if(isset($_POST['product1']) && $_POST['product1'] == '100') {
    $product1 = 100;
}

if(isset($_POST['product2']) && $_POST['product2'] == '250') {
    $product2 = 250;
}

$dollars = $product1 + $product2;

When I try to do it this way, $dollars is an empty variable “”. Can someone tell me how to fix this?

Thank you!

Answer by Starx

StarxStarx

There is no syntactical error in your code. So the only explanation is that,

  1. $_POST[‘product1’] does not have value 100 or they are not sent through post at all
  2. $_POST[‘product2’] also does not have value 250 or they are not sent through post as well

In order to verify this, do a quick var_dump($_POST) at the top of your .php file

Nabin Nepal (Starx) checkbox css html javascript jquery
February 29, 2012

How to use images for check boxes using CSS or may be Javascript?

Question by Imran

ImranImran

It is obviously very simple question but I have never done such thing before. My designer want some thing like this (it is on left side. Checked ones are grey and other white) for check boxes. Any help regarding this will be appreciated.

Answer by KooiInc

KooiIncKooiInc

One idea is to use a span with background-image (empty box), hide a related checkbox, and assign a clickhandler to the the span (onclick: change checked attribute of the related hidden checkbox, change background image of the span accordingly).

Here is an example of that

Answer by Starx

...

Please fill the form - I will response as fast as I can!