2017-04-06 70 views
-1

這裏我使用了自舉...複選框,當我點擊複選框它選中,但在引導設計它不顯示...複選框在笨

我的代碼:

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

我CSS代碼:

<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> 
+0

能否簡單闡述您的問題。因爲我檢查了你的代碼,它運行的很好。如果可能的話,然後告訴我們什麼你得到你想要得到的東西。 – Chirag

+0

這是工作的兄弟......但我們使用動態數據意味着whay我們要做的。我的問題是 –

+0

1.id =「複選框-1」如何使用這個.... 2.如何選擇多個複選框表格3.如何選擇行值送入數據庫... –

回答

0

控制器

public function workout() 
    { 

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

      exit(); 
     } 

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

視圖文件

<!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'].tags-checkbox:checked + label > i:first-of-type, 
input[type='checkbox'].tags-checkbox + label > i:last-of-type{ 
    display: none; 
} 
input[type='checkbox'].tags-checkbox:checked + label > i:last-of-type{ 
    display: inline-block; 
} 




</style> 

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

Vehicles you have.? 
<br /><br /> 

<div><span class='label-content'> I have a car</span> 
    <input name="optionshaving[]" type='checkbox' id='checkbox-1' value="bike" class='tags-checkbox sr-only'/> 
    <label for='checkbox-1'> 
     <i >&#x2717;</i> 
     <i >&check;</i> 
    </label> 
</div> 

<div><span class='label-content'> I have a bike</span> 
    <input name="optionshaving[]" type='checkbox' value="car" id='checkbox-2' class='tags-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> 

輸出

Array 
(
    [optionshaving] => Array 
     (
      [0] => bike 
      [1] => car 
     ) 

    [submit] => submit 
) 
+0

這是工作的兄弟......但我們使用動態數據意味着whay我們要做.... –

+0

1.id =「複選框-1」如何使用這個.... –

+0

2.如何在形式 –