单选按钮和条件复选框

Question

我有2个单选按钮和一个复选框。

当第一个选项是“个性化”时，应该自动检查“隐藏”复选框。

<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und"> 
     <label for="edit-field-main-download-category-und">Main Download Category </label> 
    <div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und"> 
    <input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label> 

    </div> 
    <div class="form-item form-type-radio form-item-field-main-download-category-und"> 
    <input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label> 

    </div> 
    </div> 
    </div> 
    </div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und"> 
    <input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label> 

    </div></div> 

我做了这个剧本，但它不工作：

jQuery(document).ready(function() { 
    if ($('.personalized input').val() = "personalized") { 
    $('.checkbox input').attr('checked'); 
    } 
}); 

Answer 1

你几乎没有问题。正如其他人已经指出的，您正在检查document.ready而不是onChange事件。所以它检查页面加载，而不是检查单选按钮状态的变化。 另一个问题是，你正在检查$('.personalized input')值，但是你的html中没有personalized类。 您的单选按钮具有普通级别form-radio。所以你可以使用它作为选择器。

$('.form-radio').on("change", function(){ 
 
    if ($(this).val() == "personalized") { 
 
    $('.form-checkbox').prop('checked', true); 
 
    } 
 
    else{ 
 
    $('.form-checkbox').prop('checked', false); 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und"> 
 
     <label for="edit-field-main-download-category-und">Main Download Category </label> 
 
    <div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und"> 
 
    <input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label> 
 

 
    </div> 
 
    <div class="form-item form-type-radio form-item-field-main-download-category-und"> 
 
    <input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label> 
 

 
    </div> 
 
    </div> 
 
    </div> 
 
    </div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und"> 
 
    <input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label> 
 

 
    </div></div>

这一部分：

else{ 
    $('.form-checkbox').prop('checked', false); 
    } 

，如果你愿意，你只需要取消选中如果不是个性化。 也照顾用于jQuery 1.6+的.prop()。对于较低版本，请使用.attr()

Answer 2

您必须指定当你想脚本检查radio检查或不。如果您只使用document.ready()函数，它将只检查一次一次，当网站被加载并且由于它没有被选中时，复选框也不会被选中。

您可以使用以下方法：使用radio按钮上的每个点击事件进行检查。

$('.personalized').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $('.checkbox').attr('checked', 'checked'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='radio' class='personalized'> 
 
<input type='checkbox' class='checkbox'>

Answer 3

您有几个问题在这里：

• 因为只有写的代码运行在页面加载。既然你说过你希望复选框被“自动”选中，你应该在无线电阵列上附加一个更改处理程序。
• .val()在无线电阵列上调用返回所选集合中第一个元素的值，而不管选中哪一个元素。您需要将:checked添加到您的选择器以过滤掉所选的一个无线电元件。
• 您的单个等号是赋值运算符，应替换为===。
• .attr('checked')返回checked属性的值。这里实际存在两个问题：attr只查看最初分配给元素的属性;您需要使用prop来更新已检查的属性。第二个问题是使用单参数attr函数读取属性。你需要双参数函数来设置它。

这里有一个工作示例：

jQuery(document).ready(function() { 
 
    $('input[name="radio"]').on('change',function(){ 
 
    if ($('input[name="radio"]:checked').val() === "personalized") { 
 
     $('#hidden').prop('checked','checked'); 
 
    } else { 
 
     $('#hidden').prop('checked',''); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/> 
 
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/> 
 
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>

Answer 4

只要你需要做的是在准备功能

jQuery(document).ready(function() { 
    if ($(".personalized").is(":checked")) { 
    $('.checkbox').attr('checked', 'checked'); 
    } 
}); 

，如果你想他们申请页面加载。