チェックボックスがチェックされている場合とチェックされていない場合は、空のボックスに緑色のチェック画像を表示したい。チェックボックスをdivに入れてdivの背景を設定しようとしましたが、役に立ちません。どうすればいいですか？以下は、私が望む出力です。
質問する
49037 次
8 に答える
13
グーグル中に誰かがこれにつまずいた？この CSS のみのアプローチを考慮してください。
input[type=checkbox] {
display: block;
width: 30px;
height: 30px;
-webkit-appearance: none;
outline: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
input[type=checkbox]:not(:checked) {
background-image: url(unchecked.svg);
}
input[type=checkbox]:checked {
background-image: url(checked.svg);
}
次の例を参照してください。
input[type=checkbox] {
display: block;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;
}
input[type=checkbox]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="%23000" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}<input type="checkbox" id="check" />
<div></div>于 2015-02-03T17:20:32.327 に答える
10
他の人が言ったように、プロキシ要素 (div) を使用して、div がクリックされたときにチェックボックスの状態をチェック/チェック解除することができます。以下は、まさにあなたが必要とするものの実際の例です: (読者がすぐに理解できるように、単純な JavaScript を使用しました)
ステップバイステップガイド:
1) まず、チェック済み状態用と未チェック状態用の 2 つの CSS クラスを作成します。
.image-checkbox {
background:url(unchecked.png);
width:30px;
height:30px;
}
.image-checkbox-checked {
background:url(checked.png);
width:30px;
height:30px;
}
2) DIV とチェックボックスの HTML を作成します。アイデアは、各チェックボックス (input type=checkbox) に対して div を持つことです。div の id には、識別できるように、proxy という単語が接尾辞として付けられます。また、各プロキシ div に対して、初期クラス .image-checkbox を割り当てます。2 つのチェックボックスを作成するとします。
<div id="checkbox1_proxy" class="image-checkbox" />
<div id="checkbox2_proxy" class="image-checkbox" />
元のチェックボックス (スタイル プロパティ [可視性: 非表示] で非表示)
<input id="checkbox1" name="checkbox1" type="checkbox" />
<input id="checkbox2" name="checkbox2" type="checkbox" />
3) ここで、プロキシ要素 (DIV) がクリックされたときにチェックボックスをオン/オフに設定するための JavaScript コードが必要になります。また、チェックボックスの現在の状態に応じて、Proxy div の背景画像を変更する必要があります。ドキュメントがロードされたときに、イベント ハンドラーをアタッチする関数を呼び出すことができます。
<body onload="load()">
<script type="text/javascript">
function load() {
var all_checkbox_divs = document.getElementsByClassName("image-checkbox");
for (var i=0;i<all_checkbox_divs.length;i++) {
all_checkbox_divs[i].onclick = function (e) {
var div_id = this.id;
var checkbox_id =div_id.split("_")[0];
var checkbox_element = document.getElementById(checkbox_id);
if (checkbox_element.checked == true) {
checkbox_element.checked = false;
this.setAttribute("class","image-checkbox");
} else {
checkbox_element.checked = true;
this.setAttribute("class","image-checkbox-checked");
}
};
}
}
</script>
それだけです...お役に立てば幸いです
于 2013-05-03T07:15:45.447 に答える
1
これは古いスレッドであることを認識してください。ただし、チェックボックスを画像に変換するソリューションが必要でした。:)これは私にとってうまく機能するjQueryバージョンです-共有したかった.
function setCheckboxImageSrc(checkbox, image, checkedUrl, uncheckedUrl) {
if (checkbox.is(":checked")) {
image.attr("src", checkedUrl);
} else {
image.attr("src", uncheckedUrl);
}
}
function setCheckboxImage(checkboxObj, className, checkedUrl, uncheckedUrl) {
checkboxObj.hide();
var $image = $("<img src='" + checkedUrl + "' />").insertAfter(checkboxObj);
setCheckboxImageSrc(checkboxObj, $image, checkedUrl, uncheckedUrl);
$image.click(function () {
var $checkbox = $image.prev("." + className);
$checkbox.click();
setCheckboxImageSrc($checkbox, $image, checkedUrl, uncheckedUrl);
});
}
$(".checkboxUp").each(function () {
setCheckboxImage($(this), "checkboxUp", "../../../images/DirectionUpChecked.png", "../../../images/DirectionUpUnchecked.png");
});
$(".checkboxDown").each(function () {
setCheckboxImage($(this), "checkboxDown", "../../../images/DirectionDownChecked.png", "../../../images/DirectionDownUnchecked.png");
});
于 2015-10-20T21:55:28.350 に答える
1
1つの解決策は、チェックボックスの代わりにdivを作成し、必要に応じて背景を設定してから、jsを使用してdivをチェックボックスとして動作させることです。そのため、onClickアクションを追加します。
于 2013-05-03T06:28:42.077 に答える
1
@asim-ishaq の回答に触発されて、ユーザーが label タグをクリックしてチェックボックスを切り替えることができるという事実も考慮した jquery ベースのソリューションを次に示します。
<style>
div.round-checkbox {
background: transparent url(/css/icons-sprite.png) no-repeat -192px -72px;
height: 24px;
width: 24px;
display: inline-block;
}
div.round-checkbox.checked {
background: transparent url(/css/icons-sprite.png) no-repeat -168px -72px;
}
input.round-checkbox {
display: none;
}
</style>
<div class="round-checkbox" data-id="subscribe-promo-1"></div>
<input type='checkbox' class="round-checkbox" name='subscribe' value='1' id="subscribe-promo-1" />
<label for="subscribe-promo-1">I want to subscribe to offers</label>
<script>
$(document).ready(function () {
var jRoundCheckbox = $('input.round-checkbox');
/**
* Init: if the input.checkbox is checked, show the checked version of the div.checkbox,
* otherwise show the unchecked version
*/
jRoundCheckbox.each(function () {
var id = $(this).attr('id');
if ($(this).prop('checked')) {
$('.round-checkbox[data-id="' + id + '"]').addClass("checked");
}
else {
$('.round-checkbox[data-id="' + id + '"]').removeClass("checked");
}
});
/**
* If the user clicks the label, it will check/uncheck the input.checkbox.
* The div.checkbox should reflect this state
*/
jRoundCheckbox.on('change', function () {
var id = $(this).attr('id');
$('.round-checkbox[data-id="' + id + '"]').toggleClass("checked");
return false;
});
/**
* When the user clicks the div.checkbox, it toggles the checked class;
* also, the input.checkbox should be synced with it
*/
$('div.round-checkbox').on('click', function () {
var id = $(this).attr('data-id');
var jInput = $('#' + id);
jInput.prop("checked", !jInput.prop('checked'));
$(this).toggleClass("checked");
return false;
});
});
</script>
于 2017-08-12T20:52:09.200 に答える