チェックボックス

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

出典

2017-04-06 Gopinath Parthee

です。私はあなたのコードをチェックして、それはかなり良い実行しているので。可能であれば、あなたが得ているものと手に入れたいものを教えてください。 – Chirag

これはうまく動いています...しかし、私たちは動的データを使用しています。私の質問は –

です。1.id = 'checkbox-1'この使い方.... 2.複数のチェックボックスをどのように選択するかフォーム3.選択した行の値をデータベースに送信する方法... –

コントローラ

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 
)

出典

2017-04-06 11:18:31 Nobita

これはうまく動いています...しかし、動的データを使用しているのは、実行する必要があることを意味します.... –

1.id = 'checkbox-1'これを使用して.... –

2.複数のチェックボックスをフォーム –

答えて

関連する問題