Question

我的网络应用程序有2个单选按钮和1个复选框

场景：根据单选按钮值，它应更改复选框检查状态。

Html代码

                <div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0"> Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

Jquery代码

 $('input[name="inputMeal"]').on('change', function () {
        var val = $("input[name='inputMeal']:checked").val();
        if (val == "0") {
            $('input[name="chkIsPricing"]').attr('checked', true);
        } else {
            $('input[name="chkIsPricing"]').attr('checked', false);
        }
    });

这在前两次点击中效果很好。

第1步：点击＆＃34;子餐＆＃34;单选按钮和复选框设置为检查状态。（成功）

第2步：点击＆＃34;主餐＆＃34;单选按钮和复选框设置为未检查状态（成功）

第3步：再次点击＆＃34; sub meal＆＃34;单选按钮和复选框保持未检查状态。（失败）

每当我不时地点击两个单选按钮时，复选框仍保持未检查状态。我可以知道代码中的问题在哪里吗？我想知道的是，在前两次点击（更改单选按钮）会给出成功方案，之后复选框不会根据单选按钮值进行更改。

其他信息

jQuery-2.1.4
HTML5

Answer 1

使用prop而不是attr

$('input[name="inputMeal"]').on('change', function () {
    var val = $("input[name='inputMeal']:checked").val();
    if (val == false) {
        $('input[name="chkIsPricing"]').prop('checked', true);
    } else {
        $('input[name="chkIsPricing"]').prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label>Is Main Meal</label>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="1" checked> Main Meal
      </label>
   </div>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="0"> Sub Meal
      </label>
   </div>
</div>
<div class="form-group">
   <div class="checkbox">
      <label>
      <input type="checkbox" name="chkIsPricing"> Is Pricing
      </label>
   </div>
</div>

Answer 2

这是另一个实现：

ensure_future

Answer 3

使用.attr()设置DOM树中属性的值。根据浏览器，浏览器版本和jQuery版本（尤其是1.6），这并不总是具有预期的效果。

使用.prop()，您可以操纵属性（在本例中为“已检查状态”）。我强烈建议您使用.prop()，因此以下内容将正确切换：

$('input[name="chkIsPricing"]').prop('checked', true);

JsFiddle：https://jsfiddle.net/c7qn4k9g/1/

有关详细信息，请参阅.prop（）的documentation。

Answer 4

     //Onchange function
     $('input[type="radio"]').bind('change', function(){
				if($(this).val()==0){
					$('input[type="checkbox"]').prop('checked', false);
				}else{
					$('input[type="checkbox"]').prop('checked', true);
				}
			})
      //onload function
			var inputMeal = $('input[type="radio"]:checked').val();
			if(inputMeal==1){
				$('input[type="checkbox"]').prop('checked', true);
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio"  name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0" > Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

复选框不会根据单选按钮值更改

4 个答案: