javascriptを変更して複数のチェックボックスの値を送信

Question

H、私は4つのチェックボックスをクリックしてクリックしたときに値を設定する必要があります。私は最初のもののために働くが、それは他の3つと一緒に働くように苦労しているコードを持っていますか？

コードが

<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label> 
<div align="left"> <label><input type="checkbox" name="signs" id="signs"> Non sign written</label></div> 
<div align="left"> <label><input type="checkbox" name="disabled" id="disabled"> Disabled access</label></div> 
<div align="left"> <label><input type="checkbox" name="female" id="female"> Female driver</label></div> 

で、上の最初の作品jsがある：

$(document).ready(function(){ 
    $('input[type="checkbox"]').click(function(){ 
     var inputValue = $(this).attr("value"); 
     $("." + inputValue).toggle(); 

    if (this.checked){ 
     document.getElementById("return_required").value = "YES"; 
    } 
    else { 
     document.getElementById("return_required").value = "NO"; 
    } 
    }); 
}); 

Answer 1

彼らは最初のもののような値を持っていないので。彼らはIDを持っています。

入力値を取得しているので、入力値に値がない場合は選択できません。

var inputValue = $(this).attr("value"); // Offending line, because only your first input has a value. 
$("." + inputValue).toggle(); 

Answer 2

最も簡単な方法は、this.nameを使用してクリックした要素のnameを確認し、手動でチェックボックスにそれと一致し、各チェックボックスのためのロジックをコーディングすることであろう。例を以下に提供され一目から

$(document).ready(function() { 
 
    $('input[type="checkbox"]').click(function() { 
 
    var inputValue = $(this).attr("value"); 
 
    $("." + inputValue).toggle(); 
 
    if (this.name == "colorCheckbox") 
 
     if (this.checked) { 
 
     document.getElementById("return_required").value = "YES"; 
 
     } else { 
 
     document.getElementById("return_required").value = "NO"; 
 
     } 
 
    else if (this.name == "signs") { 
 
     console.log("signs"); // replace with logic 
 
    } else if (this.name == "disabled") { 
 
     console.log("disabled"); // replace with logic 
 
    } else if (this.name == "female") { 
 
     console.log("female"); // repalce with logic 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label> 
 
<div align="left"> <label><input type="checkbox" name="signs" value="signs"> Non sign written</label></div> 
 
<div align="left"> <label><input type="checkbox" name="disabled" value="disabled"> Disabled access</label></div> 
 
<div align="left"> <label><input type="checkbox" name="female" value="female"> Female driver</label></div> 
 
<br> 
 
<input id="return_required" value="NO"></input>