Codeigniter checkbox functionality allows users to select and submit multiple

I have implemented Bootstrap for a checkbox, however when I click on the checkbox it gets checked but the visual indication of the check mark is not displayed in the Bootstrap design.

Below is my code:

<label for="success" class="btn btn-success">Success <input type="checkbox" value="" id="success" class="badgebox"><span class="badge">&check;</span></label>

Here is my CSS code:

<style>

  /* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
  width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */

    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
  text-indent: 0;
}</style>
htmlcsstwitter-bootstrapcodeigniter

Answer №1

Control Center

public function exercise()
    {

        if($this->input->post())
        {
            echo "<pre>"; print_r($this->input->post()); 

            exit();
        }

        $this->load->view('exercise');
    }

display file 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<style type="text/css">

.sr-only { 
opacity: 0;
float: right;

}
input[type='checkbox'].selection-checkbox:checked + label > i:first-of-type,
input[type='checkbox'].selection-checkbox + label > i:last-of-type{
    display: none;
}
input[type='checkbox'].selection-checkbox:checked + label > i:last-of-type{
    display: inline-block;
}




</style>

<form name="form" id="form" action="<?php echo base_url(); ?>welcome/exercise" method="post" >

Types of exercises you prefer.?
<br /><br />

<div><span class='label-content'> I like to run</span>
    <input name="preferences[]" type='checkbox' id='checkbox-1' value="run"  class='selection-checkbox sr-only'/>
    <label for='checkbox-1'>
        <i >&#x2717;</i>
        <i >&check;</i>
    </label>
</div>

<div><span class='label-content'> I prefer cycling</span>
    <input name="preferences[]" type='checkbox' value="cycle" id='checkbox-2' class='selection-checkbox sr-only'/>
    <label for='checkbox-2'>
        <i >&#x2717;</i>
        <i >&check;</i>
    </label>
</div>


<input type="submit" name="submit" id="submit" value="submit" />

</form>



</body>
</html>

results are 

Array
(
    [preferences] => Array
        (
            [0] => run
            [1] => cycle
        )

    [submit] => submit
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

Visual Studio has issues with div elements nested within dl elements

There appears to be an issue with Visual Studio 2019 (not tested previous versions) not supporting div tags within dl. When copying and pasting code from the source (3rd example) into an HTML page in Visual Studio, warnings are generated. In the followin ...

htmlvisual-studio

"Problem: Data entered into Internet Explorer forms disappears when the browser is refreshed

I am working on implementing sticky forms using AJAX-based JavaScript instead of PHP. While my setup functions smoothly on both Internet Explorer and Firefox for back/forward navigation, I am facing an issue with page refresh. Despite trying various cache ...

htmlcachinginputinternet-explorerrefresh

Explore all dropdowns in Bootstrap by hovering over them

I am looking to have all my dropdown menus appear on hover in any of the menu items. I currently have this code snippet: ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; } The problem is that it only works for one menu item at a time, d ...

cssdrop-down-menu

Elevate the opacity with a hover effect

I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When ...

csswordpresshoverwidgetsiteorigin

`Creating a HTML Table with Checkbox Options and PHP Variables`

My HTML table has 7 columns for data pulled from an XML feed and looped through for each item. PHP variables are assigned as follows: foreach ($xml->Game as $Game) { $Date = $Game->Date; $AwayTeam = $Game->AwayTeam; // Then, I assign arrays t ...

phphtmlarrayscheckboxhtml-table

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs ...

csshtmlscrollbar

The utilization of TemplateUrl proves to be ineffective

Hello, I am experiencing an issue with my code. When I click on a link, the page does not reload. Below is the HTML and JS code: var app=angular.module('mainApp',['ngRoute']); app.config(function($routeProvider){ $routeProvide ...

javascripthtmlangularjstemplatesroutes

Purchasing a Checkbox alongside its corresponding label

I have been working with the Oracle CPQ tool and am faced with the challenge of creating a checkbox attribute within it. Upon inspecting the UI, I came across the following: https://i.sstatic.net/xE5aH.png Upon examining the browser source code (generat ...

javascriptjqueryhtmlcsscheckbox

Adjusting the background color of the list item

I'm looking for a way to change the background color of the li tag when the user focuses on the input, similar to what can be seen at the bottom of this page here. After researching similar questions, it appears that achieving this effect in pure CSS ...

javascriptjqueryhtmlcssfocus

Flashing User Interface when switching pages on jQuery mobile

Currently utilizing jQuery mobile 1.0, I have encountered an issue on iPhone where when transitioning from one page to another, the second page flickers before finally displaying. Anyone know how to fix this? Thanks in advance. Update: Feel free to visit ...

javascriptcssjquery-uijquery-mobilemobile

upon reaching the conclusion of the animation without employing the .animate() method

I'm currently working on developing an iPad web application. The .animate() method doesn't meet the necessary speed requirements, so I've opted to utilize CSS for most of my transitions. How can I go about implementing html <div id="myG ...

jquerycssipad

Utilize jQuery, Flash, or HTML5 to upload an image

Does anyone know of an upload tool or plugin that has a similar look and functionality to the one used on Codecanyon's website? I tried Uploadify, but it doesn't work on all browsers. I need something that is compatible with all browsers, whether ...

jqueryflashhtmlfile-uploadupload

What is the method for manually setting the page_source in Python3 using Selenium?

Currently, I am developing an application utilizing selenium. My understanding is that the webdriver.Firefox's get method can be used to retrieve a webpage in the following manner: driver = webdriver.Firefox(executable_path=r'geckodriver&apo ...

pythonhtmlselenium

Remove any HTML tags or formatting from the body of an email using PHP in Laravel

Currently, while using an IMAP package in Laravel to extract email bodies, I am still encountering HTML artifacts despite attempting some stripping. The functions being utilized are as follows: $styles_removed = preg_replace('/(<(script|st ...

phphtmllaravel

What methods can Yahoo use to escape an iFrame without relying on JavaScript?

It's strange that even when I disable javascript, Yahoo still ends up breaking. Take a look at this scenario: How is it possible for them to achieve that? ...

javascripthtmlcssiframe

Various dimensions of images within a set size container

When a user uploads an image, I need to resize it while maintaining its aspect ratio, making sure it's no more than 200 pixels wide or 200 pixels high. After resizing, I display the image in an ASP.Net Image control. How can I prevent the images from ...

asp.nethtml

Instructions for launching an Android app from a website

Is it possible to invoke my app from HTML? For instance, I am able to successfully call a webpage from my app using this code. android code: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse( "myDomain.com"))); ...

javascriptandroidhtmliosweb