jQuery更新复选框值,取决于无线电字段?

时间:2017-12-05 14:54:30

标签: javascript jquery html checkbox

目标是将复选框字段更新为等于TRUE或FALSE,具体取决于选择了哪个单选按钮选项。如果我选择FALSE,则必须取消选中复选框。

如果我选择TRUE,我只能勾选复选框。是因为我将其定义为值吗?

     $(function() {
var MAIN= $("input[type='radio'][value='TRUE']");
var marketing1 = $("input[type='checkbox'][value='']");
var marketing2 = $("input[type='checkbox'][value='']");

    MAIN.on('change', function()
        {
      if ($(this).val() == "TRUE")  {
             marketing1.prop('checked',this.checked);
             marketing2.prop('checked',this.checked);
        } if ($(this).val() == "FALSE") {
             marketing1.prop('checked',this.checked, false);
             marketing2.prop('checked',this.checked, false);
        }

    });
});

来自HTML

     <input type="radio" name="MAIN" value="TRUE"/> Yes
     <input type="radio" name="MAIN" value="FALSE"/> No

First -  <input type="checkbox" name="marketing1" value=""/>
Second -  <input type="checkbox" name="marketing2" value=""/> 

1 个答案:

答案 0 :(得分:1)

不需要thischecked。我调整了你的代码:

$(function() {
  var MAIN= $("input[type='radio']");
  var marketing1 = $("input[type='checkbox'][name='marketing1']");
  var marketing2 = $("input[type='checkbox'][name='marketing2']");

    MAIN.on('change', function()
        {
        if ($(this).val() == "TRUE")  {
          marketing1.prop('checked',true);
          marketing2.prop('checked',true);
        } else {
          marketing1.prop('checked',false);
          marketing2.prop('checked',false);
        }

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" name="MAIN" value="TRUE"/> Yes
<input type="radio" name="MAIN" value="FALSE"/> No
<br>
First -  <input type="checkbox" name="marketing1" value=""/>
Second -  <input type="checkbox" name="marketing2" value=""/>