1. 首頁
  2. 問答
  3. 確定選擇哪個單選按鈕 - 自定義單選按鈕標記

確定選擇哪個單選按鈕 - 自定義單選按鈕標記

2017-02-27 163 views
0

我試圖確定在單選按鈕組中單選按鈕組中的哪個單選按鈕。我的標記和CSS是爲這個特定的單選按鈕定製的，我認爲這可能會導致我的點擊事件發生問題。我在JavaScript中有一些條件邏輯，其中兩個警報都出現在點擊。任何人有關於如何糾正這個問題的想法？確定選擇哪個單選按鈕 - 自定義單選按鈕標記

這是一個Fiddle的問題。

標記

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="toggle" id="family-radio-btn"> 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
     <span class="toggle-selection"></span> 
     </div> 
    </div> 
    </div> 
</div>

JS

$('#family-radio-btn').click(function() { 
    if ($('#family-yes:checked').length) { 
     alert("yes"); 
    } 
    else 
    { 
     alert("no"); 
    } 
});

CSS

.toggle { 
    position: relative; 
    height: 34px; 
    width: 100%; 
    margin: 0; 
    background: #ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 3px; 
} 
.toggle .toggle-input { 
    display: none; 
} 
.toggle .toggle-input:checked + .toggle-label { 
    color: #ffffff; 
} 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
    left: 49%; 
} 
.toggle .toggle-label { 
    position: relative; 
    z-index: 2; 
    float: left; 
    width: 50%; 
    line-height: 32px; 
    color: #555555; 
    text-align: center; 
    font-weight: normal; 
    cursor: pointer; 
} 
.toggle .toggle-label.toggle-label-off { 
    padding-left: 2px; 
} 
.toggle .toggle-label.toggle-label-on { 
    padding-right: 2px; 
} 
.toggle .toggle-selection { 
    position: absolute; 
    z-index: 1; 
    top: 2px; 
    left: 2px; 
    display: block; 
    width: 50%; 
    height: 28px; 
    border-radius: 3px; 
    background-color: #0071bc; 
    -webkit-transition: left 0.15s ease-out; 
    -moz-transition: left 0.15s ease-out; 
    -ms-transition: left 0.15s ease-out; 
    -o-transition: left 0.15s ease-out; 
    transition: left 0.15s ease-out; 
}

來源

2017-02-27 noclist

回答

2 

$('input[type="radio"]').click(function (e) { 
 
     if ($('#family-yes:checked').length) { 
 
      console.log("yes"); 
 
     } 
 
     else 
 
     { 
 
      console.log("no"); 
 
     } 
 
     
 
    });
.toggle { 
 
    position: relative; 
 
    height: 34px; 
 
    width: 100%; 
 
    margin: 0; 
 
    background: #ffffff; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 3px; 
 
} 
 
.toggle .toggle-input { 
 
    display: none; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label { 
 
    color: #ffffff; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
 
    left: 49%; 
 
} 
 
.toggle .toggle-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #555555; 
 
    text-align: center; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
} 
 
.toggle .toggle-label.toggle-label-off { 
 
    padding-left: 2px; 
 
} 
 
.toggle .toggle-label.toggle-label-on { 
 
    padding-right: 2px; 
 
} 
 
.toggle .toggle-selection { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 2px; 
 
    left: 2px; 
 
    display: block; 
 
    width: 50%; 
 
    height: 28px; 
 
    border-radius: 3px; 
 
    background-color: #0071bc; 
 
    -webkit-transition: left 0.15s ease-out; 
 
    -moz-transition: left 0.15s ease-out; 
 
    -ms-transition: left 0.15s ease-out; 
 
    -o-transition: left 0.15s ease-out; 
 
    transition: left 0.15s ease-out; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="toggle" id="family-radio-btn"> 
 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
 
     <span class="toggle-selection"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-27 16:33:06 RonyLoud

+0

訣竅，謝謝。那麼，你修改的點擊事件如何糾正這個問題？ – noclist

+0

而不是選擇'div'，我們需要獲得'input'的'click'事件 – RonyLoud

0

嘗試使用功能是：

$('#family-radio-btn').click(function() { 
    if ($('#family-yes').is(":checked")) { 
     alert("yes"); 
    } 
    else 
    { 
     alert("no"); 
    }

}）;

來源

2017-02-27 16:24:10

+0

https://jsfiddle.net/kakd8sgz/2/沒有運氣 – noclist

1

您使用的是同時包含單選按鈕父格單擊事件yes和no。所以當你點擊任何按鈕時，它會觸發點擊事件兩次標籤和一個輸入。

所以你只需要在輸入收音機上綁定點擊事件。

試試這個：您遇到與事件冒泡問題

$(function(){ 
 

 
    $('.toggle-input').click(function() { 
 
     // e.preventDefault(); 
 
     if ($('#family-yes').is(":checked")) { 
 
      alert("yes"); 
 
     } 
 
     else 
 
     { 
 
      alert("no"); 
 
     } 
 
    }); 
 
});
.toggle { 
 
    position: relative; 
 
    height: 34px; 
 
    width: 100%; 
 
    margin: 0; 
 
    background: #ffffff; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 3px; 
 
} 
 
.toggle .toggle-input { 
 
    display: none; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label { 
 
    color: #ffffff; 
 
} 
 
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { 
 
    left: 49%; 
 
} 
 
.toggle .toggle-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #555555; 
 
    text-align: center; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
} 
 
.toggle .toggle-label.toggle-label-off { 
 
    padding-left: 2px; 
 
} 
 
.toggle .toggle-label.toggle-label-on { 
 
    padding-right: 2px; 
 
} 
 
.toggle .toggle-selection { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 2px; 
 
    left: 2px; 
 
    display: block; 
 
    width: 50%; 
 
    height: 28px; 
 
    border-radius: 3px; 
 
    background-color: #0071bc; 
 
    -webkit-transition: left 0.15s ease-out; 
 
    -moz-transition: left 0.15s ease-out; 
 
    -ms-transition: left 0.15s ease-out; 
 
    -o-transition: left 0.15s ease-out; 
 
    transition: left 0.15s ease-out; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="toggle" id="family-radio-btn"> 
 
     <input type="radio" class="toggle-input" name="family" id="family-yes" checked> 
 
     <label for="family-yes" class="toggle-label toggle-label-off">Yes</label> 
 
     <input type="radio" class="toggle-input" name="family" id="family-no"> 
 
     <label for="family-no" class="toggle-label toggle-label-on">No</label> 
 
     <span class="toggle-selection"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-27 16:38:10

2

。點擊標籤會產生兩次點擊：一次是標籤，另一次是輸入。

我建議你來處理單選按鈕，點擊這個變化在你的JavaScript：

$('input[name="family"]').click(function() { 
    if($(this).attr('checked')) { 
    console.log('yes'); 
    } else { 
    console.log('no'); 
    } 
});

願望ü運氣

來源

2017-02-27 16:55:09

 相關問題

  • 暫無相關問題^_^