Question

我想在选择无线电选项时显示2个DIV。例如以下是我的HTML

＆＃13;

<form id = "selectFeature" method = "POST">
      <input type="radio" name="action" value="firstblock" /> First Upload
      <input type="radio" name="action" value="secondblock" /> Second Upload
    
    <div id ="firstblock" class="show-hide">
    <h2> Following is first block. <br> </h2>
    </div>
                                    
    <div id="secondblock" class="show-hide">
      <h2> Following is second block </h2>
      </div>
      
    <div id="uploadButton">
      This is button
    </div>
</form>

＆＃13;

java.lang.ClassCastException

＆＃13;

我希望只有在选择了firstblock或secondblock选项后才会显示上传按钮。有没有简单的方法呢？

提前致谢。

Answer 1

就像你已经使用的一样。

$(function(){
	$('input[type="button"]').click(function(){
  	var cal = $('select').val();
    $('li').each(function(index, item) {
      console.log($(item).text(), cal);
    	if(($(item).text().trim() == cal)){
      	alert($(item).closest('div').attr('id'));
      }
    })
  
  })

})

这是一个片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" style="background-color:green;">
 <ul>
  <li>abc</li>
   <ul>
    <li>def</li>
   </ul>
 </ul>
</div>
<div id="b" style="background-color:red">
 <ul>
  <li>ghi</li>
   <ul>
    <li>jkl</li>
   </ul>
 </ul>
</div>
<select>
 <option>abc</option>
 <option>def</option>
 <option>ghi</option>
 <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

input[value="firstblock"]:checked ~ #uploadButton    
input[value="secondblock"]:checked ~ #uploadButton

一些改进建议：

如果你想使用相同的css规则，你也可以缩小你的CSS。如果要将相同的规则设置为多个ID或类，建议使用它。

这可能是这样的：

#firstblock {
       display: none;
       padding: 10px;
}   
 
#secondblock {
       display: none;
       padding: 10px;
}

#uploadButton {
       display: none;
       padding: 10px;
}

input[value="firstblock"]:checked ~ #firstblock,
input[value="firstblock"]:checked ~ #uploadButton {
      display: block;
}

input[value="secondblock"]:checked ~ #secondblock,
input[value="secondblock"]:checked ~ #uploadButton {
      display: block;
}

您还可以在输入中添加标签，以便用户点击文字并选择收音机。

此处的示例代码段：

<form id = "selectFeature" method = "POST">
  <input type="radio" name="action" value="firstblock" /> First Upload
  <input type="radio" name="action" value="secondblock" /> Second Upload

<div id ="firstblock" class="show-hide">
<h2> Following is first block. <br> </h2>
</div>

<div id="secondblock" class="show-hide">
  <h2> Following is second block </h2>
  </div>

<div id="uploadButton">
  This is button
</div>
</form>

选择无线电选项时显示2个div

1 个答案: