チェックボックスボタンオプションのリストにCSSルールを適用する

Question

私はアイテムのリストを持つオブジェクトを持っています。私はチェックボックスのボタンとしてそれらを表示したい。私はラジオボタンを生成するためにコードの次のスニペットを使用しています。彼らは正常に動作しています。

for (var i = 0; i < mObject.removeList.length; i++) { 
    //Todo add logic of checkbox here 
    var lineBreak = ""; 
    if ((i+1) % 3 == 0) 
    { 
     lineBreak = "<br />"; 
    } 

    $('#' + listsDiv + 'RemoveList').append('<input type="checkbox" name="' + mObject.removeList[i].ItemName + '" value="' + mObject.removeList[i].ItemName + '" />' + mObject.removeList[i].ItemName + lineBreak); 
} 

問題は、1行に3個ずつ表示し、均等に分散したいと思うことです。私は3つの行でそれらを分割することに成功しましたが、私は頭を3行ずつすべての行にスタイルを設定する周りを得ることができません。チェックボックスに余白を追加するためにcssを使用すると、チェックボックスのテキストの長さのために列に配置されますが、列に均等に配置されません。

私は、それぞれの列の左側に各チェックボックスのアライメントを合わせて3列の行に表示するためのCSSソリューションを探していました。

件数は不明です。

現在のところ、このCSSでは必要な出力が得られていません。

input[type="radio"], input[type="checkbox"] { 
    margin-left:25px; 
} 

Answer 1

これを達成する最も簡単な方法は、label要素内のすべてのチェックボックスをラップすることです。これらのラベルにwidth: 33%を適用すると、自動的に3つの行が任意のコンテナに入力されます。

label要素を使用するもう1つの利点は、チェックボックスのヒット領域を増やすことができるため、入力に関連付けられたテキストをクリックしてチェックすることができることです。

これを試してみてください：

mObject.removeList.forEach(function(o) { 
    var itemName = o.ItemName; 
    $('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>'); 
}) 

：あなたはこのように、 forEach()を使用することにより、ES2015をサポートするブラウザをターゲットにすることができるしている場合

var mObject = { 
 
    removeList: [ 
 
     { ItemName: 'Foo1' }, 
 
     { ItemName: 'Foo2' }, 
 
     { ItemName: 'Foo3' }, 
 
     { ItemName: 'Foo4' }, 
 
     { ItemName: 'Foo5' }, 
 
     { ItemName: 'Foo6' }, 
 
     { ItemName: 'Foo7' }, 
 
     { ItemName: 'Foo8' } 
 
    ] 
 
} 
 

 
for (var i = 0; i < mObject.removeList.length; i++) { 
 
    var itemName = mObject.removeList[i].ItemName; 
 
    // Note the <label> wrapper here... 
 
    $('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>'); 
 
}

label { 
 
    display: inline-block; 
 
    width: 33%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="RemoveList"></div>

あなたはまた、ループを簡素化することができます

Answer 2

$('#' + listsDiv + 'RemoveList').append('<div class="col"><input type="checkbox" name="' + mObject.removeList[i].ItemName + '" value="' + mObject.removeList[i].ItemName + '" />' + mObject.removeList[i].ItemName + lineBreak + "</div>"); 

あなたが望むならば、幅33％、text-align、paddingなどを与えます。

col{ 
    width: 33%; 
}