需要选中取消选中然后检查单选按钮是否可以工作答案

【问题标题】：Need to check uncheck then check for radio button to work需要选中取消选中然后检查单选按钮是否可以工作
【发布时间】：2015-11-04 10:09:05
【问题描述】：

我今天的问题是问为什么我必须取消选中单选按钮，然后重新检查单选按钮才能工作。我创建了一个像素抽屉并使用单选按钮更改颜色/大小。不知道是什么问题。

<!DOCTYPE html>
<html>
<head>
<title>Pixel Draw</title>
<style>
#canvas{border: 1px solid black}
</style>
</head>
<body>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>
<br />
<STRONG>Color</STRONG>:
<form id="colorForm">
<input type="radio" name="color" value="black" checked="checked">Black
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="orange">Orange
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
<input type="radio" name="color" value="purple">Purple
</form>
<form id="sizeForm">
<br />
<STRONG>Size</STRONG>:
<input type="radio" name="size" value="10">Big
<input type="radio" name="size" value="5" checked="checked">Normal
<input type="radio" name="size" value="2">Small
</form>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5

$('#colorForm input').on('change', function() {
   $('input:radio').on('change', function(){
  ctx.fillStyle = $(this).val();
});
});

$('#sizeForm input').on('change', function() {
   $('input:radio').on('change', function(){
  size = $(this).val();
});
});


function draw(event) {
  ctx.fillRect(event.pageX, event.pageY, size, size)
}

$("html").mousedown(function () {
    $("html").mousemove(function (event) {
        draw(event);
    })
    $("html").click(function (event) {
        draw(event);
    })
})

$("html").mouseup(function () {
    $("html").off("mousemove")
})

</script>
</body>


</html>

【问题讨论】：

标签： javascript html radio-button

【解决方案1】：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5

$('#colorForm input').on('change', function() {
  ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
  size = $(this).val();
});


function draw(event) {
var posX = event.pageX - $("#canvas").offset().left;
var posY = event.pageY - $("#canvas").offset().top;
ctx.fillRect(posX, posY, size, size)
}

$("html").mousedown(function() {
  $("html").mousemove(function(event) {
    draw(event);
  })
  $("html").click(function(event) {
    draw(event);
  })
})

$("html").mouseup(function() {
  $("html").off("mousemove")
})

#canvas {
  border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<STRONG>Color</STRONG>:
<form id="colorForm">
  <input type="radio" name="color" value="black" checked="checked">Black
  <input type="radio" name="color" value="red">Red
  <input type="radio" name="color" value="orange">Orange
  <input type="radio" name="color" value="yellow">Yellow
  <input type="radio" name="color" value="green">Green
  <input type="radio" name="color" value="blue">Blue
  <input type="radio" name="color" value="purple">Purple
</form>
<form id="sizeForm">
  <br />
  <STRONG>Size</STRONG>:
  <input type="radio" name="size" value="10">Big
  <input type="radio" name="size" value="5" checked="checked">Normal
  <input type="radio" name="size" value="2">Small
</form>

<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>

这很好用

$('#colorForm input').on('change', function() {
ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
size = $(this).val();
});

更新函数draw(event)

【讨论】：

虽然实际绘图点和十字准线已关闭，但它工作正常。你知道怎么解决吗？