Question

我使用标签＆＃39;标注我的单选按钮样式。标签使用＆＃39;之前＆＃39;选择。我正在使用＆＃39;点击＆＃39;标签的事件可以在所有浏览器中进行点击（Chrome不支持在点击元素之前/之后）。现有的脚本会在点击单选按钮时显示/隐藏一些元素。

我想做的事

我在点击＆＃39;点击＆＃39;标签事件。现有的显示/隐藏功能无法正常工作，因为我在点击标签时试图点击收音机。

我需要什么

我需要编写一个不会影响现有脚本（显示/隐藏）的脚本，它应该适用于所有浏览器。

我无法做什么

我无法通过提供id和属性来完成它。：（
我无法自定义现有脚本。

我认为我能做什么

我可以通过任何其他方式修改HTML / CSS来设计我的收音机。但是有很多地方可以做些改变。：（
使用＆＃34;更改＆＃34;事件而不是＆＃34;点击＆＃34; for show / hide divs。

代码示例

＆＃13;

/*what I'm trying...*/
$(document).ready(function(){
  $('input[type="radio"]+label').on('click',function(){
    $(this).prev().click();
  });
});

/*existing script*/
$('input[name="fieldname"]').click(function(){
  if($('#fieldid').is(':checked')){
    $('#divid').show();
    $('#divid1').hide();
  } else if($('#fieldid1').is(':checked')){
    $('#divid1').show();
    $('#divid').hide();
  }
});
/*existing script*/

＆＃13;

.divs, input[type="radio"]{display:none;}

input[type="radio"]+label::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+label::before{
  background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="radio" name="fieldname" id="fieldid" class="fieldclass" />
  <label>show textfield</label>
  <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" />
  <label>show button</label>
  <div id="divid" class="divs"><input type="text" size="30"></div>
  <div id="divid1" class="divs"><input type="submit" value="button"></div>
</form>

＆＃13;

Answer 1

我有一个解决方案，但请检查您是否可以在现有点击事件代码之后放置此解决方案。基本上，我试图取消绑定现有的click事件并在另一个 document.ready 段中重写它。检查是否可能：

    $(document).ready(function(){
      // Unbind the existing click event
      $('input[name="fieldname"]').unbind( "click" );

      // if any label immediately after radio is clicked, call radio's click event
      $('input[type="radio"]').next('label').on('click',function(){
            $(this).prev('input[type="radio"]').click();
      });

      // radio is clicked
      // if the label next to radio says show textfield / show button
      // find the sibling div which has input of type this/that, and show/hide
      $('input[type="radio"]').on('click',function(){   
        /*if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs").has('input[type="text"]').show();
            $(this).siblings("div.divs").has('input[type="submit"]').hide();        
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs").has('input[type="text"]').hide();
            $(this).siblings("div.divs").has('input[type="submit"]').show();
        }*/
        if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs:eq(0)").show();
            $(this).siblings("div.divs:eq(1)").hide();      
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs:eq(0)").hide();
            $(this).siblings("div.divs:eq(1)").show();      
        }   

      }); /* end click */
    }); /* end doc.ready */

我已经在Firefox和Chrome中检查了这一点，代码正在两者兼容。

Answer 2

由于您不允许编辑现有的JS，因此不必向其添加任何其他JS 。

只需将标题包装到<span>中即可并且<span>和<input>分别加入<label>元素：

/* ABSOLUTELY NO NEED TO ADD ANYTHING */

/*existing script*/
$('input[name="fieldname"]').click(function(){
  if($('#fieldid').is(':checked')){
    $('#divid').show();
    $('#divid1').hide();
  } else if($('#fieldid1').is(':checked')){
    $('#divid1').show();
    $('#divid').hide();
  }
});
/*existing script*/

.divs, input[type="radio"]{display:none;}

/* SIMPLY CHANGE `label` to `span` and you're done! */
input[type="radio"]+span::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+span::before{
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Wrap INPUT and the new SPAN into LABEL -->

<form>
  <label>
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" />
    <span>show textfield</span>
  </label>
  <label>
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" />
    <span>show button</span>
  </label>
  <div id="divid" class="divs"><input type="text" size="30"></div>
  <div id="divid1" class="divs"><input type="submit" value="button"></div>
</form>

同一事件的两个独立处理程序

2 个答案: