Question 41674 in PHP Question posted in
Official manual can be found here.

Checkbox array (square brackets) – all have the same name and 'checked' is not working – PHP

I have a number of checkboxes that return an array of data to PHP. They are all named ‘Plans[]’ but with different IDs.

I have a CSS checkbox styler that replaces the usual HTML checkbox with something more fancy…

When the page is displayed, there is one (or several) that are ‘checked’, but they don’t display as checked (I think one does but that is hidden usually).

I am assuming that the problem is caused by them all having the same name and so somehow they are the checked attribute is not getting acted on for all of them for this reason.
I have tried wrapping each of them in their own forms (as I saw this suggested elsewhere) but to no avail.

Here’s an example of what it looks like:

<style type="text/css">
.checkOpt input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: -.3em;
  right: 5%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 20%;
  border: 1px;
  border-color: #1e62d0;
  border-style: dashed;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  font-weight: 900;
  color: blue;
  margin-top: -11px;
  margin-left: -3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  content: "2714";
  position: absolute;
  display: none;
}


/* Style the indicator (dot/circle) */
.checkOpt .checkmark:after {
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    
    /* background: white; */
    text-shadow: -1px -1px 0 #7f7f7f, 1px -1px 0 #7f7f7f, -1px 1px 0 #7f7f7f, 1px 1px 0 #7f7f7f;
}

/* Show the indicator (dot/circle) when checked */

.checkOpt input:checked~.checkmark:after {
  display: block;
}

/* On mouse-over, add a grey background color */
.checkOpt:hover input ~ .checkmark {
  background-color: #97c4fe;
}
/* When the radio button is checked, add a blue background */
.checkOpt input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkOpt input:disabled ~ .checkmark {
  background-color:#b0c7df; pointer:default;
}

.test {
  position: relative;
  height:60px;
}
</style>

<div class="test">
  <div class="checkOpt" style="top:20px;">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line - OFNL" id="12" value="0.00" checked="checked" >              
                  <span class="checkmark"></span>
          </label>
  </div>
</div>
<div  class="test">
  <div class="checkOpt" >
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Paper Bill" id="35" value="2.00" >              
                  <span class="checkmark"></span>
           </label>
  
  </div>
</div>
<div  class="test">
  <div class="checkOpt">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line " id="12" value="0.00" checked="checked" disabled="disabled">              
                  <span class="checkmark"></span>
          </label>
  
  </div>
</div>

…only one of these (the first) is showing as checked – the rest are not.
Does anyone have any ideas what I might do to get round this (without coding changes to the subsequent data collection if possible!)

tried everything I can think of and would welcome any suggestions….

UPDATE – I tried updating the page so that the checkboxes have different names (‘Plans[0]’, ‘Plans[1]’ etc.) and the checkmarks suddenly started to appear in the right places.

The issue is now that there is (legacy) JQuery code that doesn’t work, i.e.

$("input[name='plans[]']:checked").each(function(){
        var thisPlan= $(this).attr('id');  var thisVal = $(this).attr('value'); 
        plans.push(thisPlan); 
        planValues.push(thisVal);
// ....
// ....
}

I guess this would work if the Plans list were just POSTed and picked up by PHP, but in fact it is intercepted by Javascript, processed and re-posted via Ajax to the next (PHP) page (where it is picked up quite simply by $_POST[‘plans’]). It’s a real mess, but Ihave inherited it…

Anyone have any idea how I could work round this without breaking all the legacy (Javascript/JQuery) code?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    SOLVED. I have discovered that there is actually a bit of Javascript/JQuery code that is overwriting the 'checked' attribute and this is causing the problem. The 'name' duplication was a red herring - by changing the names (from 'plans[]') I just stopped the code working (it used $('input[name="plans[]"]').each(function ()).

    Thanks for your suggestions and help - Sorry to waste anyone's time. It's a bit of a nightmare trying to unravel someone else's mucky code!

    Now I just have to get the functionality to work without that code...


  2. 0

    The issue is that you’re absolutely positioning them as Quentin stated in the comments. There are a few other issues:

    • You have two elements with the same ID and this isn’t permitted (12)
    • IDs should start with a letter
    • Your first element has the attributed disabled = "" but this will make the item disabled irrespective of the value of the attribute. It’s not ideal, I know.
    • disabled element values are usually not sent with the form (see link in the bullet point above) which may explain why it’s not getting to your server script. this might be the cause as the check box is ticked but also disabled and the browser may be just ignoring all disabled checkboxes when sending the form data.
    • It’s the same for checked = "", if the checked attribute is present on in you input element it’ll still be checked.

    I’ve had a go at what I think you’re trying to achieve and marked up any changes.

    .checkOpt {
  /* added this so the container has some size */
  height: fit-content;
  display: inline-block;
}

.checkOpt input {
  /* added this, you're looking to make your checkbox invisible so just use display:none */
  display:none;
  /* removed this 
  position: absolute;
  opacity: 0;
  cursor: pointer;
  */
}

/* Create a custom radio button */
.checkmark {
  /* removed this
  position: absolute;
  top: 0em;
  /*
  right: 5%;*/
  
  /* added this so that the tick marks are positioned in the middle so you don't have to use
  absolute positioning on them */
  display: inline-flex;
  align-items:center;
  justify-content:center;
  
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 20%;
  border: 1px;
  border-color: #1e62d0;
  border-style: dashed;
  cursor:pointer;
}

.checkb:checked ~ .checkmark:after {
  /*if the checkbox is checked then make the tick appear by making it opaque */
  opacity:1;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  font-weight: 900;
  /*color: white;
  margin-top: -11px;
  margin-left: -3px;*/
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  content: "2714";
  
  /* added this - makes the tick mark transparent when it's not checked */
  opacity: 0;
  /*position: absolute;*/
  /*display: none;*/
}

.checkb:disabled ~ .checkmark:after {
  /* I noticed that you had the disabled attribute set in your HTML so I've styled this gray so you know it's 
  not click-able */
  color:lightgray;
}
    <div class="checkOpt">
  <label class="labelopt">
    <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line - OFNL" id="a12" value="0.00" checked="checked" disabled="" autocomplete="off">
    <span class="checkmark"></span>
  </label>
</div>

<div class="checkOpt">
  <label class="labelopt">
    <input type="checkbox" name="plans[]" class="checkb " title="Paper Bill" id="a35" value="2.00" autocomplete="off">
    <span class="checkmark"></span>
  </label>

</div>

<div class="checkOpt">
  <label class="labelopt">
    <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line " id="a12X" value="0.00" autocomplete="off" checked="checked" disabled="disabled">
    <span class="checkmark"></span>
  </label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search