Question

我正在尝试替换自定义图像而不是标准复选框，我尝试了很多方法，但我无法，我已经使用过：已选中。以下是示例代码。

$().ready(function(){
"use strict";
$("#ansSubmit").click(function() {
    $.ajax({
        type: "POST",
        url: "updateScore.php",
        dataType: "json",
        data:{ 
            data : JSON.stringify(flag)
        },
        success: function(data) {
            alert(data.reply);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
        }
    });  
    $("#infoDiv").load("updateScore.php"); // to see what $_POST contains
  });
});

我有4个这样的复选框，我希望它们在检查时替换为其他图像。

Answer 1

在此处查看演示：https://jsfiddle.net/IA7medd/s5L02bck/

HTML：

<p class="checkbox-inline">
  <input type="checkbox" class="inlineCheckbox" value="option3" id="cb1">
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_settings_48px-128.png" alt="" width="70px;"/>
  <label for="cb1"> Option 1 </label>
</p>

您将使用：像这样检查

.inlineCheckbox:checked{
  display:none;
}
.inlineCheckbox:checked + img{
  display:inline-block;
}

Dynamic Check Box CSS＆amp;引导

1 个答案: