jquery移动更改复选框颜色

Question

如果选中其他颜色，如何更改复选框颜色（蓝色）和复选框图标颜色（白色）。

   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <form>
        <label>
            <input type="checkbox" name="checkbox-0 ">Check me
        </label>
    </form>

Answer 1

蓝色：

.ui-icon-check:after {
    background-image: url(newicon.svg);
}

白色图标是SVG：

$(document).ready(function() {
  var num1 = []

  var num2 = []

  var func = null

  $('#one').click(function() {
    if (func === null) {
      num1.push('1')
      console.log(num1)
    } else {
      num2.push('1')
      console.log(num2)
    }
  });

  $('#two').click(function() {
    if (func === null) {
      num1.push('2')
      console.log(num1)
    } else {
      num2.push('2')
      console.log(num2)
    }
  });

  $('#three').click(function() {
    if (func === null) {
      num1.push('3')
    } else {
      num2.push('3')
    }
  });

  $('#four').click(function() {
    if (func === null) {
      num1.push('4')
    } else {
      num2.push('4')
    }
  });

  $('#five').click(function() {
    if (func === null) {
      num1.push('5')
    } else {
      num2.push('5')
    }
  });

  $('#six').click(function() {
    if (func === null) {
      num1.push('6')
    } else {
      num2.push('6')
    }
  });

  $('#seven').click(function() {
    if (func === null) {
      num1.push('7')
    } else {
      num2.push('7')
    }
  });

  $('#eight').click(function() {
    if (func === null) {
      num1.push('8')
    } else {
      num2.push('8')
    }
  });

  $('#nine').click(function() {
    if (func === null) {
      num1.push('9')
    } else {
      num2.push('9')
    }
  });

  $("#zero").click(function() {
    if (func === null) {
      num1.push('0')
    } else {
      num2.push('0')
    }
  });

  $('#plus').click(function() {
    func = "+"
    console.log(func)
  });

  $('#minus').click(function() {
    func = "-"
  });

  $('#divide').click(function() {
    func = "/"
  });

  $('#multiply').click(function() {
    func = "*"
    console.log(func)
  });

  $('#equals').click(function() {
    if (func === "+") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 + number2
      console.log(complete)
    } else if (func === "-") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 - number2
      console.log(complete)
    } else if (func === "*") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 * number2
      console.log(complete)
    } else if (func === "/") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 / number2
      console.log(complete)
    } else {
      console.log("error")
    }
  });

  $('#clear').click(function() {
    num1 = []
    num2 = []
    func = null
    console.log(num1)
    console.log(num2)
    console.log(func)
  });



});

Answer 2

您需要做的就是识别jquery使用的类。之后你可以简单地应用这个属性

.ui-btn.ui-checkbox-on:after {
  background-color: red !important;
}

.ui-btn.ui-checkbox-off:after {
  background-color: blue !important;
}

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<form>
  <label>
            <input type="checkbox" name="checkbox-0 ">Check me
        </label>
</form>