隱藏和顯示單選按鈕與複選框

Question

基本上我想隱藏並顯示單選按鈕，如果複選框被選中或沒有，但有一些條件。

1. 第一個單選按鈕需要默認選中，即使在複選框被選中後隱藏。

2. 如果複選框已被選中，則顯示所有單選按鈕，如果需要，用戶可以選擇另一個單選按鈕。

3. 但是，如果取消選中複選框，則將單選按鈕設置爲默認選中的第一個，並隱藏所有單選按鈕。

我試着修改了一些解決方案，我發現，但沒有成功:(

我的HTML：

<input name="featured_ad" value="1" type="checkbox">condition</input> 
<div class="buttons"> 
    <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> 

非常感謝

Answer 1

正如我們討論過的，這個工作對你有幫助嗎？

HTML：

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition 
<div class="buttons"> 
    <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> 
</div> 

JS：

function resetradio (checkbox) { 
    var buttons = document.querySelector('.buttons'); 
    var radios = document.getElementsByName('ad_pack_id'); 
    radios[0].checked = true; 
    if (checkbox.checked == true) { 
     buttons.style.display = 'block'; 
    } 
    else { 
     buttons.style.display = 'none'; 
    } 
} 

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

CSS：

.buttons { 
    display: none; 
} 

小提琴：http://jsfiddle.net/dgqn5fc4/1/

Answer 2

你有幾個問題首先，您需要確保關閉輸入標籤：

<input name="featured_ad" value="1" type="checkbox">condition</input> 

<div class="buttons"> 
    <input type="radio" name="ad_pack_id" value="497649">value 1</input> 
    <input type="radio" name="ad_pack_id" value="497648">value 2</input> 
    <input type="radio" name="ad_pack_id" value="497647">value 3</input> 
</div> 

然後，您可以通過將checked =「checked」添加到適當的無線電元素，在html中檢查您的默認單選按鈕。

<div class="buttons"> 
    <input type="radio" checked="checked" name="ad_pack_id" value="497649">value 1</input> 
    <input type="radio" name="ad_pack_id" value="497648">value 2</input> 
    <input type="radio" name="ad_pack_id" value="497647">value 3</input> 
</div> 

您可以在默認情況下在你的CSS隱藏你的單選按鈕：

.buttons { 
    display: none; 
} 

然後，您可以使用jQuery向他們展示，並根據您的病情做您的選擇：

$(document).ready(function(){ 
    $("input[name='featured_ad']").on("change", function(){ 
     var isChecked = $(this).prop("checked"); 
     if(isChecked){ 
      $(".buttons").show(); 
     } else { 
      $(".buttons").hide(); 
      $("input[name='ad_pack_id'][value='497649']").prop("checked", "checked"); 
     } 
    }); 
}); 

編輯：

這裏是一個小提琴：http://jsfiddle.net/8q94Lvbo/

Answer 3

做到以下幾點。

$('[name="featured_ad"]').on('change', function(){ 
 
    var $first = $('[name="ad_pack_id"]').first(); 
 
    var $rest = $('[name="ad_pack_id"]').slice(1); 
 
    if($(this).is(':checked')){ 
 
    $first.prop('checked',true); 
 
    $first 
 
     .closest('span') 
 
     .hide(); 
 
    $rest.prop({ 
 
     'checked':false, 
 
     'disabled':false 
 
    }); 
 
    
 
    } else { 
 
    $first 
 
     .closest('span') 
 
     .show(); 
 
    $first.prop('checked',true); 
 
    $rest.prop({ 
 
     'checked':false, 
 
     'disabled':true 
 
    }); 
 
    } 
 
}).change();

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

Answer 4

你必須傳遞參數給JavaScript像的onclick = 「Show_Div（ 'Div_1'）」 引號不喜歡的onclick = 「Show_Div（Div_1）」。

和他人的要求，你可以檢查以下HTML

<input type="checkbox" id="check" onclick="checkFun();"/>Your CheckBox<br/> 
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div('Div_1')" width="100px"> 
    <p> 
     <input id="radio1" type="radio" onclick="Show_Div('Div_1')" class="cb1" onchange="cbChange1(this)" checked="checked"/>Flower 1</p> 
    <div id="Div_1" style="display: none;"> 
     Flower is pink. 
    </div> 
    <br/> 
    <br/> 

    <img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div('Div_2')" width="100px"> 
    <p> 
     <input type="radio" id="radio2" onclick="Show_Div('Div_2')" class="cb1" onchange="cbChange1(this)" disabled >Flower 2</p> 
    <div id="Div_2" style="display: none;"> 
     Flower is orange. 
</div> 

您可以將下面這個簡單的JS和jQuery才達到你的目標

function checkFun(){ 
    console.log("click"); 
    var ch=$("#check"); 
    if(ch.is(':checked')){ 
    $("#radio2").attr("disabled",false); 
    }else{ 
    $("#radio1").prop("checked", true); 
    $("#radio2").prop("checked", false); 
    $("#radio2").attr("disabled",true); 
    } 
} 
function Show_Div(Div_id) { 
    if(Div_id=="Div_1"){ 

    $("#Div_1").show(); 
    $("#Div_2").hide(); 
    }else{ 
    $("#Div_2").show(); 
    $("#Div_1").hide(); 
    } 
} 
    function cbChange1(obj) { 
     var cb1 = document.getElementsByClassName("cb1"); 
     for (var i = 0; i < cb1.length; i++) { 
      cb1[i].checked = false; 
     } 
     obj.checked = true; 
    }