More than 3 years have passed since last update.

チェックボックスのチェックの数

JavaScript

Posted at 2020-11-01


<p>
<input type="checkbox" class="demo2" name="demo2" id="demo2-1" autocomplete="off">
<label for="demo2-1">デモ1</label><br>
<input type="checkbox" class="demo2" name="demo2" id="demo2-2" autocomplete="off">
<label for="demo2-2">デモ2</label><br>
<input type="checkbox" class="demo2" name="demo2" id="demo2-3" autocomplete="off">
<label for="demo2-3">デモ3</label>
</p>
<p id="link2">Next</p>

<script>
  var s2_1 = document.getElementById('demo2-1');
var s2_2 = document.getElementById('demo2-2');
var s2_3 = document.getElementById('demo2-3');
var l2 = document.getElementById('link2');
s2_1.addEventListener('click',function(){
if (this.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_2.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_3.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else {
l2.innerHTML = 'Next →';
}
},false);
s2_2.addEventListener('click',function(){
if (this.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_1.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_3.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else {
l2.innerHTML = 'Next →';
}
},false);
s2_3.addEventListener('click',function(){
if (this.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_1.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else if(s2_2.checked) {
l2.innerHTML = '<a href="#">Next →</a>';
} else {
l2.innerHTML = 'Next →';
}
},false);
</script>


<label><input type="checkbox" class="chk" name="hage[]" value="299">チェックボックス299</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="300">チェックボックス300</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="301">チェックボックス301</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="355">チェックボックス335</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="407">チェックボックス407</label>
<br /><br />
<button type="submit" id="btn1">-----完了-----</button>


$(function(){
  // 初期状態のボタンは無効
  $("#btn1").prop("disabled", true);
    // チェックボックスの状態が変わったら（クリックされたら）
    $("input[type='checkbox']").on('change', function () {
        // チェックされているチェックボックスの数
        if ($(".chk:checked").length > 0) {
          // ボタン有効
          $("#btn1").prop("disabled", false);
        } else {
          // ボタン無効
          $("#btn1").prop("disabled", true);
        }
    });
});


<html>
<head>
<title>ボタン有効／無効変更</title>
<script type="text/javascript">
function enable_button(){
    document.getElementById("button1").value = "　　　有効　　　";
    document.getElementById("button1").disabled = "";
}
function disable_button(){
    document.getElementById("button1").value = "　　　無効　　　";
    document.getElementById("button1").disabled = "disabled";
}
</script>
</head>
<body>
<input type="button" onclick="alert('click')" id="button1" value="　　　有効　　　">
<a href="#" onclick="enable_button()">有効</a>　<a href="#" onclick="disable_button()">無効</a>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up