使用複選框條件

基本上我想使用複選框按如下─使用複選框條件

給出的條件。如果我檢查複選框以激活單選按鈕激活單選按鈕，第一無線電將被檢查。如果我改變到另一個單選按鈕，複選框仍然被選中。
如果我取消選中該複選框，我想取消選中任何單選按鈕。我的意思是，如果複選框被選中，單選按鈕需要被檢查，並且如果複選框未被選中，單選按鈕也需要被取消選中。

我試過一堆部分解決方案，但沒有一個能正常工作。 :(

我的HTML：

<input name="featured_ad" value="1" type="checkbox">condition 
<br><br> 
<input type="radio" name="ad_pack_id" value="497649">value 1<br> 
<input type="radio" name="ad_pack_id" value="497648">value 2<br> 
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

非常感謝

來源

2015-10-19 Eder Augusto

一旦選項被從無線電組中選擇，則不能可靠地將其刪除。如果您需要這種行爲，最好禁用單選按鈕，然後根據複選框的狀態啓用/禁用它們。或者，您可以刪除複選框併爲「不需要」添加第四個電臺 –

以下是使用純javascript的示例。

小提琴：http://jsfiddle.net/3bugg14y/1/

HTML：

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition 
<br><br> 
<input type="radio" name="ad_pack_id" value="497649" onclick="setcheckbox()">value 1<br> 
<input type="radio" name="ad_pack_id" value="497648" onclick="setcheckbox()">value 2<br> 
<input type="radio" name="ad_pack_id" value="497647" onclick="setcheckbox()">value 3<br>

JS：

function resetradio (checkbox) { 
    var radios = document.getElementsByName('ad_pack_id'); 
    var index = 0, length = radios.length; 
    if (checkbox.checked == false) { 
     for (; index < length; index++) { 
      radios[index].checked = false; 
     } 
    } 
    else { 
     radios[index].checked = true; 
    } 
} 

function setcheckbox() { 
    var checkbox = document.getElementsByName('featured_ad')[0]; 
    if (checkbox.checked == false) { 
     checkbox.checked = true; 
    } 
}

來源

2015-10-19 13:16:13 AtheistP3ace

這是有效的，但如果選擇了收音機，則不檢查複選框。 –

@JacquesMarais oops抱歉，沒有意識到這是要求。更新了答案。我沒有改變HTML，除了添加點擊，但我會建議給複選框一個ID。 – AtheistP3ace

這是最好的解決方案，因爲它是純粹的JavaScript並且實際工作。 –

您可以使用removeProp()取消選擇單選按鈕，並prop()選擇複選框

$(function(){ 
 
    $('input[name=featured_ad]').change(function(){ 
 
    if(!$(this).is(":checked")) 
 
     $("input[name=ad_pack_id]").removeProp("checked"); 
 
    else 
 
     $("input[name=ad_pack_id]:first").prop("checked",true); 
 
    }); 
 

 
    $('input[name=ad_pack_id]').click(function(){ 
 
     $('input[name=featured_ad]').prop("checked",true); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input name="featured_ad" value="1" type="checkbox">condition 
 
<br><br> 
 
<input type="radio" name="ad_pack_id" value="497649">value 1<br> 
 
<input type="radio" name="ad_pack_id" value="497648">value 2<br> 
 
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

！

來源

2015-10-19 13:15:29

如果選中該複選框，則不會選擇第一個值。 –

@JacquesMarais，是的，我忘了提到這一點。請檢查更新後的答案。 –

如果我理解正確的話，你可以這樣做：

$(':checkbox').on("click", function(event) { 
 
    if (this.checked) 
 
    $(':radio:first').prop('checked', this.checked); 
 
    else 
 
    $(':radio').prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="featured_ad" value="1">condition 
 
<br> 
 
<br> 
 
<input type="radio" name="ad_pack_id" value="497649">value 1 
 
<br> 
 
<input type="radio" name="ad_pack_id" value="497648">value 2 
 
<br> 
 
<input type="radio" name="ad_pack_id" value="497647">value 3 
 
<br>

下面

來源

2015-10-19 13:19:31

這是有效的，但如果選擇了收音機，則不檢查複選框。 –

@JacquesMarais這在問題描述中沒有提及......它完成了OP所要求的問題......沒有更多 –

他想要@JacquesMarais建議的內容。 –

檢查片段放在HTML

function set(event){ 
    if(event.checked=== false && event.type === "checkbox"){ 
     var ele = document.querySelectorAll("input[type='radio']"); 
     for(var i = 0; i<ele.length; i++) 
     { 
      ele[i].checked = false; 
     } 
    } 
    else if(event.checked=== true && event.type === "checkbox"){ 
     var ele = document.querySelector("input[type='radio']"); 
     if(ele){ 
      ele.checked = true; 
     } 
    } 
    else if (event.type !== "checkbox") 
    { 
    var ele = document.querySelector("input[type='checkbox']"); 
    if(ele){ 
     ele.checked = true; 
    } 
    } 
}

變化：

<input name="featured_ad" value="1" type="checkbox" onClick="set(this)">condition 
<br><br> 
<input type="radio" class="a" name="ad_pack_id" value="497649" onClick="set(this)">value 1<br> 
<input type="radio" class="a" name="ad_pack_id" value="497648" onClick="set(this)">value 2<br> 
<input type="radio" class="a" name="ad_pack_id" value="497647" onClick="set(this)">value 3<br>

來源

2015-10-19 13:32:23

加入隱藏/顯示基於該複選框狀態單選按鈕的屬性。

小提琴：http://jsfiddle.net/3bugg14y/3/

HTML：

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition 
<br><br> 
<div id="buttons" style="display:none"> 
<input type="radio" name="ad_pack_id" value="497649">value 1<br> 
<input type="radio" name="ad_pack_id" value="497648">value 2<br> 
<input type="radio" name="ad_pack_id" value="497647">value 3<br> 
</div>

JS：

function resetradio (checkbox) 
{ 
    var radios = document.getElementsByName('ad_pack_id'); 
    var index = 0, length = radios.length; 
    if (checkbox.checked == false) 
    { 
     document.getElementById('buttons').style.display='none'; 
     for (; index < length; index++) 
     { 
      radios[index].checked = false; 
     } 
    } 
    else 
    { 
     document.getElementById('buttons').style.display='block'; 
     radios[index].checked = true; 
    } 
}

來源

2015-10-19 13:41:04 CrakC

這應該工作。在取消選中複選框後，還要跟蹤上次選定的單選按鈕。

var check = document.querySelector('input[type="checkbox"]'), 
 
    radioBtns = Array.prototype.slice.call(document.querySelectorAll('input[type="radio"]')), 
 
    isRadioChecked = false, 
 
    lastCheckedRadio = 0; 
 

 

 
check.addEventListener('change', function(e) { 
 
    if (!e.target.checked) { 
 
    radioBtns.forEach(function(elem) { 
 
     elem.checked = false; 
 
    }); 
 
    isRadioChecked = false; 
 
    } else { 
 
    if (!isRadioChecked) { 
 
     radioBtns[lastCheckedRadio].checked = true; 
 
    } 
 
    } 
 
}, false); 
 

 
radioBtns.forEach(function(elem, index) { 
 
    elem.addEventListener('change', function(e) { 
 
    if (e.target.checked) { 
 
     isRadioChecked = true; 
 
     lastCheckedRadio = index; 
 
    } else { 
 
     isRadioChecked = false; 
 
    } 
 
    if (e.target.checked && !check.checked) { 
 
     check.checked = true; 
 
    } 
 
    }, false); 
 
});

<input name="featured_ad" value="1" type="checkbox">condition 
 
<br><br> 
 
<input type="radio" name="ad_pack_id" value="497649">value 1<br> 
 
<input type="radio" name="ad_pack_id" value="497648">value 2<br> 
 
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

來源

2015-10-19 13:50:51 DavidDomain

使用複選框條件

回答

相關問題