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

因为他们没有像第一个那样的价值。他们有个身份。

您正在获取输入值并对其进行处理，因此如果输入没有值，您将无法选择它。

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

Answer 2

最简单的方法是使用name检查点击元素的this.name并手动将其与复选框匹配，然后为每个复选框编写逻辑代码。下面提供了一个示例：

＆＃13;

$(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
    }
  });
});

＆＃13;

<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>

＆＃13;

javascript更改并发送多个复选框值

2 个答案: